> 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="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FEwhyaFXPCDrkDceAN5FD%2Fshells.png?alt=media&amp;token=2e834e5a-47bf-4932-8df4-0c7f1ae3c794" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FcUuJcg4dUcxjQpgSm5Ma%2Fclasses.png?alt=media&amp;token=08ca1502-aaaa-4213-900e-a71dfe67a6fd" 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="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FnARjiWgFiL1mJCsDPjgc%2Flist%20of%20shells.png?alt=media&amp;token=89baf68e-3548-47ba-8bd5-88f30ac5c33c" 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="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FTvDckLtMmjIlMg0NTlfb%2Fdeselect%20class.png?alt=media&amp;token=300a4217-263b-4306-ba3f-1c81e8b04b12" alt=""><figcaption></figcaption></figure>

### Name

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

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F0cfk1ZAH2uz2Tx2kSawb%2Fname%20%2B%20create.png?alt=media&amp;token=568b54c1-497b-4325-92d9-e19f4e0250df" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FO7qobk8pywYtdcEKmFwb%2Favatar%20shell.png?alt=media&amp;token=095ddab5-5e22-4ee7-84d4-ee778f70068b" alt=""><figcaption></figcaption></figure>

### Inspect

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

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FN0cLEqH7hQeVvOchqpTm%2Fpeaking%20hehe.png?alt=media&amp;token=85c18f16-5d06-4b3b-8cab-a4c50ea09785" alt=""><figcaption></figcaption></figure>

### Modify

* To modify the shell, click the Shell.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fgo30lHQdX50FjU8yvjwP%2Fclick%20on%20avatar%20.png?alt=media&amp;token=94d32fda-3d39-411e-a407-46b4024f1061" alt=""><figcaption></figcaption></figure>

* Modify as required.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FF3uHXzlZTJOhoWmnsuWb%2Fmodify%20shell.png?alt=media&amp;token=06b0b858-82ac-415a-86f0-c8ce03173a15" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FtZzXMbWQt7P3h57wTXPp%2Fmodify%20shell%20name.png?alt=media&amp;token=b75c5525-51c3-4436-a738-fd4a4ea5596a" alt=""><figcaption></figcaption></figure>

### Exit

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

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FvMLczkkp5zUU6VN41sEk%2Fushita.png?alt=media&amp;token=728a2b56-3fe0-477c-838c-00e571fd166c" 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="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F2VsAyIHntS7h6vDzqVQb%2Fremove%20all.png?alt=media&amp;token=a9096cda-73cf-44a3-928b-ec0578ae4c85" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F9hKhquUGp4GPlgCrObPf%2Fshell%20avatar.png?alt=media&amp;token=5035669e-e609-4089-850c-9c908d0ed8fb" alt=""><figcaption></figcaption></figure>

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