How to use Tailwind CSS in TeleportHQ

Here’s how you can add Tailwind CSS to elements in your TeleportHQ projects to create modern looking websites or UI’s.

Enabling Tailwind CSS
Using Tailwind classes
Applying classes with modifiers

Enabling Tailwind CSS

Developer mode is currently still an experimental feature. To enable it for your project you will need to go to Project settings -> Experimental features and check Tailwind CSS.

Using Tailwind classes

Once the feature is enabled, return to the editor and select an element. In the Right panel you will see a new section named Tailwind. Here you can add any Tailwind CSS class and it will automatically be applied to your element.

The Tailwind field has an autocomplete feature to help you more easily add classes.

Applying classes with modifiers

Every utility class in Tailwind can be applied conditionally by adding a modifier to the beginning of the class name that describes the condition you want to target.

This can handle states like "hover", "focus", "active" or responsive modifiers for breakpoints.

All these classes will be applied in preview/publish mode by default, but if you want to apply them in the editor as well, you can enable this from the Apply classes with modifiers checkbox in the Tailwind section.

Updated on: 03/03/2023