ska-blocks
Getting started
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…Read moreElement block
The Element block is a block that can contain other blocks. By default the HTML tag name div is used, but it can be changed using the Element type block controls: The block also supports receiving any custom attributes: As with most blocks, the block also accepts Tailwind classes. In combination with a custom tag…Read moreText block
The Text block is a block that can contain Rich Text. By default the HTML tag name span is used, but it can be changed using the Element type block controls: The block is very basic and similar to the core/paragraph block except you can customize the tag name and attributes. Use it whenever the…Read moreTailwind 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,…Read moreImage block
The Image block can be used to display different types of media. Modes The image block comes with multiple different modes of operation: File Choose an image file from WordPress Media Library, custom URL, upload it or use the Featured image (also works inside the core Query block). SVG Render any SVG image by insert…Read moreGallery block
The Gallery block is an alternative to the WordPress core Gallery block. The main advantage of the ska/gallery block is that it can render an image gallery with a simple and predictable markup: .wp-block-ska-gallery > .image > img. When disabling the Wrap option, the gallery will not render any parent element, only .image > img…Read moreConfiguring Tailwind
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.…Read moreVariations
Variations allow you to save the state of the current block (and its’ children) and make a new “Block” (Block variation) from it that you can insert like any other block. The functionality is very similar to the core WordPress Block patterns also known as Reusable blocks. Variations are an experimental feature that may become…Read morePresets
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…Read moreSelectors
Selectors are a novel method of applying Tailwind classes to deeply nested HTML markup using ska-blocks UI. Since ska-blocks provides a UI for managing Tailwind classes, it is possible to take advantage of the Tailwind’s capability of applying rules to nested elements. With Tailwind you can style direct child elements by using the [&>*] variant,…Read more