# Shells

Shells  are a unique Cwicly feature that allow you to create reusable collections of Tailwind classes to avoid repeated modifications to identical blocks. This is a game changer.

Since this is a new feature in Cwicly, it would be helpful to go through an example.

## Example

In the template below you can see the utility classes for each avatar image are repeated five separate times.

### Convert to Shell

* Select the avatar image block.
* Click the shell icon to open the Shell converter.

<figure><img src="/files/0GL90wFUHZKzGv61GyN8" alt=""><figcaption></figcaption></figure>

* A list of the current classes applied to your block will appear.&#x20;

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

* If you already have applied a shell to the block, it will also appear as shells can nest other shells.

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

{% hint style="info" %}
By default, all Tailwind classes are selected for shelling.
{% endhint %}

### Select/Deselect

* To select or deselect, simply click on the desired class.

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

### Name

* Assign a suitable name.&#x20;
* Click create or press enter.

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

{% hint style="info" %}
Notice all the selected classes have now been shelled into the Avatar shell.
{% endhint %}

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

### Inspect

* To inspect the contents of a shell, simply hover.

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

### Modify

* To modify the shell, click the Shell.

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

* Modify as required.

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

* Modify the shell’s name in the appropriate field.

<figure><img src="/files/7onYNAxjdpquHqx9M23B" alt=""><figcaption></figcaption></figure>

### Exit

* To exit shell modification, simply click the back icon.

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

### Apply to other blocks

* Let’s apply the avatar shell to our other avatars.
* Right click the "+" icon to remove all classes.

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

* Click the "+" icon to open the class selector and select the required shell in the shell area.

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

* Any change you make to a shell will automatically and globally apply to all blocks.


---

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