{"id":47,"date":"2025-09-26T08:50:54","date_gmt":"2025-09-26T08:50:54","guid":{"rendered":"https:\/\/ska-blocks.com\/docs\/2025\/09\/26\/configuring-tailwind\/"},"modified":"2025-09-30T17:08:57","modified_gmt":"2025-09-30T17:08:57","slug":"configuring-tailwind","status":"publish","type":"post","link":"https:\/\/ska-blocks.com\/docs\/configuring-tailwind\/","title":{"rendered":"Configuring Tailwind"},"content":{"rendered":"\n

ska-blocks plugin comes with controls for editing Tailwind configuration.<\/p>\n\n\n\n

The controls can be accessed from ska-blocks<\/strong> Block Editor plugin item in the top right corner of the Block Editor screen, in the Tailwind<\/strong> tab:<\/p>\n\n\n\n\"Options\n\n\n\n

When you change Tailwind configuration, all blocks and presets will automatically re-compile to ensure they are using the latest Tailwind configuration. For that reason, when you update the Tailwind configuration you may need to save changes twice<\/strong> in a row – once to apply the new configuration, second time to save all the re-compiled CSS.
When you go to change another post or a template then the blocks will also automatically re-compile if the configuration has changed in the meantime – this is indicated by a little badge on the “ska” logo:<\/p>\n\n\n\n\n\n\n\n

It simply means you should save the current post, even if you didn’t make any changes manually, changes were made to the styles of the page.<\/p>\n\n\n\n

The default custom Tailwind theme is very simple. If you make changes a checkbox appears, asking whether you wish to re-compile everything or not:<\/p>\n\n\n\n\"ska-blocks<\/a>\n\n\n\n

If you were to change --radius<\/code> from var(--radius-sm)<\/code> to some other value, you don’t need to re-compile content, because only the --radius<\/code> variable is changed and all content already refer to it as such, so you should uncheck the “Re-compile content” checkbox. If you add a new variable, then same thing – it’s not present in any content so there’s nothing needed recompile.<\/p>\n\n\n\n

Tailwind theme<\/h2>\n\n\n\n

For extending the CSS-based Tailwind 4 theme you can add overrides to the Custom theme<\/strong> option. For reference you can toggle the “Show advanced options” checkbox and take a look at the Default theme<\/strong> option to see how the full configuration looks like. <\/p>\n\n\n\n

\n<\/path><\/svg>\n\n\n\n

It is generally best to avoid editing advanced options<\/strong>. When left at their default values, any updates, corrections, or fixes included in a plugin update can be applied automatically. However, if you modify these settings, then your changes will not be overwritten by future updates.<\/p>\n<\/div>\n\n\n\n

Typography<\/strong> and Theme colors<\/strong> options have a separate UI for easier editing.<\/p>\n\n\n\n

Tailwind colors<\/h2>\n\n\n\n

Along with ska-blocks -> Tailwind -> Theme colors<\/strong> (which provide a UI for editing various common theme-related colors), there is an advanced setting Tailwind colors<\/strong> which contains all the default Tailwind colors.<\/p>\n\n\n\n

The colors themselves are included in the Tailwind Default theme<\/strong> (which you can see if you check the “Show advanced options” checkbox under Tailwind settings):<\/p>\n\n\n\n

ska-blocks -> Tailwind -> Default theme<\/span><\/header>
@theme default static {\n\t@ska-blocks-tailwind-colors;\n}<\/code><\/pre>