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.

Cwicly automatically detects classes that apply to a property so you do not have to remove a Tailwind class to change its value.

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

Any team member unfamiliar with Cwicly can write in their classes as they usually would while another can work with the UI at the same time.

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.