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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cwicly.com/tailwind/getting-started/apply-a-class.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.