ska-blocks plugin comes with controls for editing Tailwind configuration.
The controls can be accessed from ska-blocks Block Editor plugin item in the top right corner of the Block Editor screen, in the Tailwind tab:
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 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:
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.
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:
If you were to change --radius from var(--radius-sm) to some other value, you don’t need to re-compile content, because only the --radius 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.
Tailwind theme
For extending the CSS-based Tailwind 4 theme you can add overrides to the Custom theme option. For reference you can toggle the “Show advanced options” checkbox and take a look at the Default theme option to see how the full configuration looks like.
It is generally best to avoid editing advanced options. 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.
Typography and Theme colors options have a separate UI for easier editing.
Tailwind colors
Along with ska-blocks -> Tailwind -> Theme colors (which provide a UI for editing various common theme-related colors), there is an advanced setting Tailwind colors which contains all the default Tailwind colors.
The colors themselves are included in the Tailwind Default theme (which you can see if you check the “Show advanced options” checkbox under Tailwind settings):
@theme default static {
@ska-blocks-tailwind-colors;
}you may choose to omit them, replace them or move them to a separate @theme default inline reference { ... } block if you wish for all the colors to not have a CSS variable defined on the front end (slight reduction in CSS bundle size).