Cwicly Tailwind Shells and Components

As it has come up recently, this is just a quick non-exhaustive summary of the similarities and differences between Shells and Components.

Components and Shells can work independently of one another or be combined together.

While there is some overlap in what they do to a degree, they are not solving exactly the same use cases.

Components are much more powerful ways to create reusable block hierarchies that can have editable properties and variations.

See the Cwicly documentation for more information about Components:

Shells are effectively A Cwicly Tailwind addition to group combinations of Tailwind classes into reusable sets that can be applied at once.

See the getting started video for a quick demonstration of using Shells:

Taking the Card example that @Louis has mentioned, this can be achieved using a Component or a Shell, or both.

Given a UI with multiple cards using the same styles (that are not necessarily in a loop template or Query template), with Tailwind this would require duplication of the applied classes for each Card, thereby creating a sub-optimal updating workflow.

We can reduce these multiple classes into a single Shell called “Card” that can be applied to each block and the Card Shell can then be updated and any changes in it will be applied to every usage instance, thereby solving the duplication aspect.

The same outcome can be achieved using a Component for this use case, with all of the additional benefits that come with Components.

One way that Shells are different to Components, is that for a given block you can apply multiple shells, thereby combining reusable features together within the block.

Screenshot 2024-02-02 at 20.16.35


The using multiple Shells is a major benefit. And you can create Shells that bundle other Shells. And none of this affects the output, of course. It’s a workflow management feature that has lots of utility.