Styling post content blocks and third party blocks with Tailwind

As many people are now utilising the Tailwind capabilities of Cwicly, one requirement that we all have is to be able to style blocks that we can’t directly control from our templates (such as blocks within Post Content and third-party blocks).

Fortunately, Cwicly + Tailwind has you covered.

In Tailwind, we are provided with a key way of constructing dynamic classes that can be applied to Cwicly blocks and used to target child selectors, similarly to how relative styles work in Cwicly - these are Arbitrary Variants.

Taking as an example this current way to style post content using relative styles:

To do this with Tailwind, for each “inner” or third party block you want to style, you will need to add an Arbitrary Variant class for each style you want to apply to the Cwicly Post Content Block that contains those blocks.

Here are the steps to target descendant blocks by applying class using an Arbitrary Variant:

  1. In Tailwind mode, click the + button to open the class dialog
  2. Type in [&_tag] where tag is the tag of the html element you are targeting (e.g. [&_p])
  3. Add : and the Tailwind class you want to apply to to this html element (e.g. :mb-4) and press “Create” or select this from the Tailwind class filter list
  4. At this point your class should look like this [&_p]:mb-4

You can repeat this for as many tags as you want to target and for as many styles as you want to apply.

When you have finished you can wrap the common classes you want to share between Post Content blocks these in a Shell by clicking the “Convert to Shell” button.

You can then add additional shared Post Content styles to this shell later on by clicking on the shell and adding more Arbitrary Variant classes or other classes at any time:

With Cwicly + Tailwind you can do a lot more than this, and this tip just barely scratches the surface of what can be achieved, so it is meant as an intro to help get you started.

Similarly to Cwicly relative styles, Tailwind allows you to target nested blocks with pseudo states and allows you to use other types of selectors, such as direct child and sibling, so the possibilities are endless.

Please also see these feature requests for making this process even easier and more powerful:


Great! Thank you for writing this one, all makes sense

1 Like

Hi, thanks for sharing this as its good timing as I am working on a Woocommerce site with Tailwind and have been using “relative style” on Cwicly block “wrappers” to target the inner content on Woocommerce blocks.

Is there a different use case for TW “Arbitrary variants” that Cwicly’s "relative styles’ cannot handle itself? From my understanding they can ultimately do the same thing, but the benefits or this “arbitrary variants” approach are primarily:

  1. If you want to re-use a set targeting/styling, it’s just one click to add the shell to another block - while with Cwicly’s relative styles, you would have to copy and paste each relative style one at a time.
  2. The shell is dynamic so if you make the change on one block, it automatically applies those changes to other blocks with the shell applied - while the Cwicly relative styles would require you to go back to any block that has relative styles - which could get messy/complicated pretty quickly.

These are HUGE benefits, so thanks for sharing - I am just typing this out to make sure I understand things correctly, but also to ask if I am misunderstanding or missing anything else.

Thanks again for the detailed post on this! Super powerful.

You are partially correct. If you applied the relative styles directly to the block itself, then this would be the case. Then you would have to copy and paste the relative styles to use on different pages.

If on the other hand you add your relative styles to a Global Class, then you get the exact same benefits you cited. Where the Global Class is equivalent to the Shell and the Relative Style is equivalent to the Arbitrary Variant.