Tailwind block

The Tailwind block in the ska-blocks plugin allows to enter HTML with Tailwind classes and compile it to include the Tailwind CSS on the front end as well.

The block itself has multiple features and can serve many different purposes, such as rendering any custom HTML, converting Tailwind HTML to blocks, adding scripts or styles, server-side rendering shortcodes and compiling Tailwind CSS from their output.

Custom HTML

Insert any HTML a lot like the core WordPress HTML block but with the addition of basic syntax highlighting, indentation as well as a button to beautify your HTML:

Convert HTML to blocks

On the block toolbar, hit the Convert to blocks button to convert the inserted HTML into WordPress blocks:

The blocks used are mostly Element and Text blocks, with core Paragraph, Heading and List blocks used when applicable.

This functionality can be tried live in the browser right now in the “ska-tailwind-editor” as it uses a modified version of the Tailwind block:

Try it now

Additional features

Should you not convert HTML to blocks, you can also use this block as a better alternative for the WordPress core HTML block.

1. CSS is compiled for the Tailwind classes that are included in the HTML. The CSS is then rendered on the front end along with your HTML. When the page has other blocks that are already using some of the same Tailwind classes the CSS is tree-shaken to include every Tailwind class only once.

2. Additional custom CSS can be added when navigating to the CSS tab in the block toolbar:

   

   Plain CSS can be used, as well as Tailwind @apply functionality and nested CSS syntax.

   

3. Live preview of the HTML rendered along with the compiled CSS is available in the Preview tab:

   

4. Server side rendering – Should you include WordPress shortcodes in the HTML, enable the SSR option:

   

   This will render the shortcode server-side (which itself may use Tailwind classes) and compile CSS based on the server side rendered output, which means any Tailwind classes included in the shortcode output are also accounted for.

   Note: if you change what the shortcode outputs, or the shortcode dynamically outputs different Tailwind classes under different circumstances, then the block will not know of any new classes until you edit the page and re-compile the CSS.

5. Render block inline – or don’t! Sometimes you need to add a bunch of raw HTML in a tight space. Disable the “Render block inline” option to only produce a small button in the block editor:

   

   

   When you click on the button, the whole block content opens up in a full screen modal so can make changes to the HTML.

   

6. Beautify HTML/CSS – The block also features buttons for quickly formatting the HTML or CSS code that has been inputted.