Apply a Class
Tailwind classes can be applied to a block in one of two ways; through the UI and/or the class selector.
Through the UI
To add a Tailwind class through the UI, select a block.
Select a property.
Select the required value in the modal.

If you are familiar with Tailwind values, you can input the desired value without having to use the class prefix.

Any valid custom input will automatically be converted to a Tailwind class.

Tailwind classes appear with the characteristic Tailwind blue in the Class area.

Through the Class Selector
You can also add a Tailwind class through the class selector.
Apply a Class
Navigate to the Block Inspector.
Open the class selector.
Type in your desired class.
Some suggestions appear in the Tailwind classes column.
To apply, select a suggestion or press enter.

Remove a Class
You can remove a Tailwind value in one of two ways:
Resetting the value of the property.

Or by removing its associated class by clicking the remove icon.

Team Members
Any team member unfamiliar with Cwicly can simply write in their classes as they usually would while allowing you to work with the UI at the same time.
Hybrid Users
For hybrid users, those who like to work with classes and the UI:
Shift click on a Tailwind class.
The UI will automatically take you to the appropriate editing view.
Hover Preview
The Hover Preview property allows you to see what a class or value represents.
Hover over a Tailwind class to get its CSS definition.

Hover over a value suggestion to see its CSS value.

Last updated
Was this helpful?