> For the complete documentation index, see [llms.txt](https://docs.cwicly.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cwicly.com/tailwind/getting-started/apply-a-class.md).

# 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.

<figure><img src="/files/IGt4qZ1QCZlqWnRSV3OZ" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/U6sRpohBm8P68bprbfFj" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/QMBRMbutG3VAB6WKkmHb" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Cwicly automatically detects classes that apply to a property so you do not have to remove a Tailwind class to change its value.
{% endhint %}

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

<figure><img src="/files/LC6zdCuNZJrgxszR2sk3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
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.
{% endhint %}

## Through the Class Selector

You can also add a Tailwind class through the class selector.

## Apply a Class

* Navigate to the Block Inspector.&#x20;
* Open the class selector.&#x20;
* Type in your desired class.&#x20;
* Some suggestions appear in the Tailwind classes column.
* To apply, select a suggestion or press enter.

<figure><img src="/files/klY5gXo695iUROdmNU4V" alt=""><figcaption></figcaption></figure>

## Remove a Class

You can remove a Tailwind value in one of two ways:

* &#x20;Resetting the value of the property.

<figure><img src="/files/qPWBSeqlPYxQvAf1mlCX" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/CMiiG5LqkEI4q3Y5D181" alt=""><figcaption></figcaption></figure>

## 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.&#x20;

* Hover over a Tailwind class to get its CSS definition.

<figure><img src="/files/q1ZXfjzZlGpddT9CCjyo" alt=""><figcaption></figcaption></figure>

* Hover over a value suggestion to see its CSS value.

<figure><img src="/files/Wh4KHG21jMXQqBXSvUQO" alt=""><figcaption></figcaption></figure>
