{"id":46,"date":"2025-09-26T08:50:53","date_gmt":"2025-09-26T08:50:53","guid":{"rendered":"https:\/\/ska-blocks.com\/docs\/2025\/09\/26\/presets\/"},"modified":"2025-09-26T09:40:45","modified_gmt":"2025-09-26T09:40:45","slug":"presets","status":"publish","type":"post","link":"https:\/\/ska-blocks.com\/docs\/presets\/","title":{"rendered":"Presets"},"content":{"rendered":"\n

Presets can be used to reuse a set of Tailwind classes.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

To create a preset, add some Tailwind classes to a block and select Create preset<\/strong> from the paint brush icon:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Then you can select which Tailwind features to include in the preset and also give it a name:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Once created, you can reuse the preset by clicking the paint brush icon and select Presets<\/strong> to open a modal where you can select from all the available presets.<\/p>\n\n\n\n

When the preset is applied to a block, you can edit it by clicking the pencil icon of a preset:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

This will let you manage the classes of the preset like you would normally on a block:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Preset modes<\/h2>\n\n\n\n

Preset mode can be toggled between Dynamic<\/strong> and Static<\/strong>:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Static (default)<\/em><\/h3>\n\n\n\n

Instead of giving the block Tailwind class names, static preset applies the preset class name (e.g. ska-preset--custom-preset<\/code>) which has the CSS compiled from the preset class names applied. While this approach creates more CSS and is unable to tree-shake classes that are used multiple times on separate blocks, it is more resilient<\/strong> to updates – when you update the preset, the new CSS will be used instantly on all pages that the preset has been used, while with a Dynamic preset updates would take effect only once you edit the page where the preset is used. For this reason static mode is enabled by default<\/strong> when adding a preset.<\/p>\n\n\n\n

Dynamic<\/h3>\n\n\n\n

With a dynamic preset, the preset produces Tailwind class names and applies them to the block (e.g. m-0 border-4<\/code>). When you add additional Tailwind classes to the block that has the preset, the class names can be merged intelligently when they are from the same feature, for example when a preset produces m-0 border-4<\/code> and you add border-8<\/code> to the block, it won’t have the classes m-0 border-4 border-8<\/code> but instead will only receive m-0 border-8<\/code> since border-4<\/code> and border-8<\/code> are the same feature.<\/p>\n\n\n\n

Theme presets<\/h2>\n\n\n\n

ska-theme comes with a lot of pre-defined presets that are used throughout the site and can be edited from ska-blocks -> Presets<\/strong>:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

That allows to control most of the effective “CSS” of the WordPress theme from the options<\/em> and instead of adding custom CSS overrides you are changing, adding and removing the values directly<\/strong>, leaving no unused CSS bloat behind and giving you full control to redesign even the smallest details.<\/p>\n\n\n\n

The trade-off for this approach is that once you start using the theme, the presets are yours<\/strong> – a theme update will not overwrite them when there are fixes or additions – as it would lose your changes. In that respect it works similar to the Tailwind UI kit “Catalyst” where it gives you ready-made React components and you can edit and evolve them yourself, while a more traditional approach would be to import components from an NPM library and not have full control over them.<\/p>\n\n\n\n

Presets list<\/h2>\n\n\n\n

All presets can be managed from ska-blocks -> Presets<\/strong>.<\/p>\n\n\n\n

Presets can be added to a block using the paint brush icon or by searching for a preset in the Tailwind classes input.<\/p>\n\n\n\n

\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"

Presets can be used to reuse a set of Tailwind classes. To create a preset, add some Tailwind classes to a block and select Create preset from the paint brush icon: Then you can select which Tailwind features to include in the preset and also give it a name: Once created, you can reuse the…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-46","post","type-post","status-publish","format-standard","hentry","category-ska-blocks"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/46","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=46"}],"version-history":[{"count":1,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/46\/revisions"}],"predecessor-version":[{"id":213,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/46\/revisions\/213"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=46"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=46"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=46"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}