The ska-blocks WordPress plugin adds the ability to add Tailwind CSS classes to all block editor blocks that support custom class names.
Basics
The plugin will add an input field to the block inspector controls sidebar:
Using the input field Tailwind classes can be added directly, by inputting, for example, m-4 and pressing enter. The value will then be reflected below:
The value can then be modified by clicking on it:
Alternatively you can search for Tailwind features and add them this way:
Meaning you don’t necessarily need to remember all the possible Tailwind features and their option variations. When you add new values to the Tailwind configuration, they will also show up in the UI. Entering a custom value in the [ ] field can produce an arbitrary value that is only visible for the current block.
Variants
The UI also supports adding different variants and selecting separate values for them:
CSS
The plugin will collect all the Tailwind classes of a block and compile them to produce CSS.
The CSS is then stored in the block attributes so that it can be rendered in the block editor to give you a real-time preview of what the Tailwind classes are doing.
The CSS is also rendered on the front end. When you have multiple blocks on the same page that use the same Tailwind classes they are tree-shaken, meaning every Tailwind class’ CSS is only rendered once.
Blocks
The ska-blocks plugin also comes with a handful of blocks. Most notable of which are the Element and Text blocks.
The Element block produces an HTML element that can contain children (e.g. div, ul, section), the Text block produces an HTML element that can contain text (e.g. span, p, a).
Both of the blocks have the ability to assume any HTML tag name as well as to have any HTML attributes. Combined with Tailwind CSS classes, this unlocks the ability produce virtually any design directly in the WordPress Block Editor. The ska-theme also comes with Alpine.js which allows for interactivity as well.
Usage without ska-theme
When using ska-blocks without ska-theme, you may want to disable loading the Tailwind preflight as it may conflict with your existing theme styles.
The preflight can be disabled by turning off the ska-tailwind -> Tailwind -> Preflight setting.
When using Tailwind without the preflight, some classes may not work properly, such as instead of using border to add a border, you would need to add border border-solid.
Usage with a classic theme
When using ska-blocks without a Full Site Editing theme, you’ll probably run into issues with additional (unwanted) styles being applied to blocks in the block editor. Using !m-0 and *:!m-0 classes can be used to reset most of the margins when needed, but you’ll really need to know what you’re doing and probably need to open the browser dev tools a lot to see which CSS rules are coming from where and use ! a lot.