Tailwind classes, Shells and order of overrides

When applying multiple Shells to a block, if they have conflicting/overriding classes, it is unclear which will take priority.

Let’s say there is a “Content Image” Shell with an aspect ratio of 16/9 and there is a “Post Image” Shell with an aspect ratio of 4/3, when adding both of these to a block, it doesn’t seem to matter in which order this is done, the result is always the same. One always takes priority over the other and it is unclear which this will be or how (if at all) we can influence this.

I have also noticed that the same applies when nesting Shells (which is also a nice feature by the way).

@Louis, please can you provide some guidance on this when you have a moment.

If I am missing something obvious, let me know, as I see Shells as extremely powerful but the lack of control with overrides is tripping me up temporarily.

Thank you.

Hello @StrangeTech,

The class order (or Shells) within the class attribute will not modify the end result, since it is the order in which the class definition appears in the stylesheet that will override a previous definition.

This gives a bit more context: Overriding Tailwind classes in React - DEV Community

We are looking at different possibilities to merge (or force) classes so that the last one specified in the block is the one that takes precedence, but the merging logic does require careful preparation as it would have to run on the server side.

Currently, this is something you have to be aware of when adding multiple Shells or Tailwind classes that might conflict.

Hope that helps.

Cheers,

1 Like

That is fine, thank you for clarifying @Louis. I wasn’t sure whether Cwicly was doing something different in the background, but of course it makes perfect sense.

The Shell nesting feature really helps as we can define base Shells that can be combined in more context specific Shells to avoid any overt conflicts.