Styling post content blocks and third party blocks with Tailwind

[StrangeTech]

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:

Making Posts editor client friendly

Hi @smontreuil , As I happily found out myself, through doing exactly what @Louis described, yes, any styles you apply to the post content block are indeed reflected perfectly in the admin interface. This allows you to customise each post types editing experience individually to reflect the front-end display. Cwicly global styles are also automatically applied to the editor, so you don’t need to do anything special or extra to make that work. One trick that I recommend that really worked wel…

Making Posts editor client friendly

No problem, once you get your head around it, it becomes a lot easier to follow. When you set up the Relative Style you need to add the rule that targets the p tag. First click on the Rules button for the Relative style: [Relative Styles Inspector Panel] Then you can configure the rule to target the p tag: [Relative Style Rules]

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:

Ability to add Arbitrary Variants in the Tailwind Pseudos dialog

Currently the Tailwind Pseudos dialog has the full selection of Tailwind supported pseudo prefixes, including the Direct Child * one. [Screenshot 2024-02-17 at 07.04.38] It will be a massive time saver to be able to add Arbitrary Variants in there also, using a free text input. This will allow us to quickly target descendants using the Cwicly UI without having to type the whole class out manually within the class dialog. It can work something like this: [Cwicly-Tailwind-Pseudos-Dialog-Arbit…

Ability to construct Arbitrary Variants similar to the relative style dialog

As Tailwind’s Arbitrary Variants can work similarly to relative styling in Cwicly, it will be very intuitive to have a dialog similar to the one used for relative styles to create Arbitrary Variants. This can have a free text input and a builder for choosing selectors (i.e. descendant, direct child, etc) and adding levels of nesting. Thank you Cwicly team!

[grantambrose]

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

[bobbymcg]

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.

[StrangeTech]

@bobbymcg

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.

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.