{"id":58,"date":"2025-09-26T08:50:57","date_gmt":"2025-09-26T08:50:57","guid":{"rendered":"https:\/\/ska-blocks.com\/docs\/2025\/09\/26\/getting-started\/"},"modified":"2025-09-26T09:37:39","modified_gmt":"2025-09-26T09:37:39","slug":"getting-started-with-ska-blocks","status":"publish","type":"post","link":"https:\/\/ska-blocks.com\/docs\/getting-started-with-ska-blocks\/","title":{"rendered":"Getting started"},"content":{"rendered":"\n

ska-blocks<\/strong> is a free WordPress plugin<\/a> that adds the ability to add Tailwind CSS<\/strong> classes to all Block Editor blocks.<\/p>\n\n\n\n

Basics<\/h2>\n\n\n\n

The plugin will add an input field to the block inspector controls sidebar:<\/p>\n\n\n\n\"Input\n\n\n\n

Using the input field Tailwind classes can be added directly, by inputting, for example, m-4<\/code> and pressing enter. The value will then be reflected below:<\/p>\n\n\n\n\"m-4\n\n\n\n

The value can then be modified by clicking on it:<\/p>\n\n\n\n\"User<\/a>\n\n\n\n

Alternatively you can search for Tailwind features and add them this way:<\/p>\n\n\n\n\"Automatic\n\n\n\n\"User<\/a>\n\n\n\n

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 [ ]<\/code> field can produce an arbitrary value that is only visible for the current block.<\/p>\n\n\n\n

Variants<\/h2>\n\n\n\n

The UI also supports adding different variants and selecting separate values for them:<\/p>\n\n\n\n\"Default<\/a>\n\n\n\n

CSS<\/h2>\n\n\n\n

The plugin will collect all the Tailwind classes of a block and compile them to produce CSS.<\/p>\n\n\n\n

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<\/strong> of what the Tailwind classes are doing.<\/p>\n\n\n\n

The CSS is also rendered on the front end<\/strong>. When you have multiple blocks on the same page that use the same Tailwind classes they are tree-shaken<\/strong>, meaning every Tailwind class’ CSS is only rendered once.<\/p>\n\n\n\n

Blocks<\/h2>\n\n\n\n

The ska-blocks<\/strong> plugin also comes with a handful of blocks. Most notable of which are the Element<\/a> and Text<\/a> blocks.<\/p>\n\n\n\n

The Element<\/strong> block produces an HTML element that can contain children (e.g. div<\/code>, ul<\/code>, section<\/code>), the Text<\/strong> block produces an HTML element that can contain text (e.g. span<\/code>, p<\/code>, a<\/code>).<\/p>\n\n\n\n

Both of the blocks have the ability to assume any HTML tag name<\/strong> as well as to have any HTML attributes<\/strong>. Combined with Tailwind CSS classes, this unlocks the ability produce virtually any design directly in the WordPress Block Editor. The ska-theme<\/strong> also comes with Alpine.js<\/a> which allows for interactivity as well.<\/p>\n\n\n\n

Usage without ska-theme<\/a><\/h2>\n\n\n\n

When using ska-blocks without ska-theme, loading of Tailwind preflight<\/strong> is disabled by default as it may conflict with your existing theme styles.<\/p>\n\n\n\n

The preflight can be toggled from ska-blocks -> General -> Tailwind global styles<\/strong> setting.<\/p>\n\n\n\n

\"ska-blocks<\/div>\n\n\n\n

When using Tailwind without the preflight, some classes may not work properly, such as instead of using border<\/code> to add a border, you would need to add border border-solid<\/code>.<\/p>\n\n\n\n

Usage with a classic theme<\/h2>\n\n\n\n

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!<\/code> and *:m-0!<\/code> 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 !<\/code> a lot.<\/p>\n","protected":false},"excerpt":{"rendered":"

ska-blocks is a free WordPress plugin that adds the ability to add Tailwind CSS classes to all Block Editor blocks. 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…<\/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-58","post","type-post","status-publish","format-standard","hentry","category-ska-blocks"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/58","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=58"}],"version-history":[{"count":1,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/58\/revisions"}],"predecessor-version":[{"id":182,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/58\/revisions\/182"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=58"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=58"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=58"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}