Style rich text with Tailwind classes

Most WordPress blocks allow to enter rich text, which means you can make selected text bold, italic, add links or even inline images. This functionality can be leveraged to style parts of the text with Tailwind classes.

Select some text and make it italic with the rich text formatting controls which appear on the right side of the block toolbar:

For example, using the Italic format essentially wraps the part of the text with the em HTML element. This element can be styled with Tailwind classes.

[&_em]:not-italic [&_em]:text-primary

Or using a selector:

ska-blocks:{"skaBlocksSelectors":{"[&_em]":{"skaBlocksFontStyle":{"v":{"$":{"@":"not-italic"}}},"skaBlocksTextColor":{"v":{"$":{"@":"primary"}}}}}}

Tailwind format (experimental)

ska-blocks also includes an experimental “Tailwind” format, when applied to text allows to apply Tailwind classes:

The compiled CSS is stored in an HTML attribute that is stripped on the front end and used as regular CSS.

Currently there is no good method of detecting and loading that CSS in the block editor, so when you reload the block editor page the CSS will not be loaded until you interact with the format. For that reason the Tailwind format is still experimental and you should prefer to use the method outlined earlier for adding Tailwind classes to selections of rich text.