> 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/shells.md).

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