Documentation
Docs

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:

Rich text with Italic format applied

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"}}}}}}

When pressing Shift + Enter in a rich text input you can add a new line – creating a <br> tag – these can also be “styled” using a Tailwind class such as max-sm:[&>br]:hidden to control what screen sizes use line breaks.

For more granular control of the HTML markup use multiple Text blocks (as <span>, <kbd>, <abbr>, etc elements) inserted into an Element block (rendered as <span> or <p> elements). Entering HTML markup directly into the Tailwind block and pressing “Convert to blocks” can be used as a shortcut to produce the blocks you need.

Examples