Title: ska-blocks – TailwindCSS for Block Editor
Author: ska-dev
Published: 22, Marzu de 2025
Last modified: 21, Xineru de 2026
---
Guetar plugins
# ska-blocks – TailwindCSS for Block Editor
By [ska-dev](https://profiles.wordpress.org/skadev/)
[Download](https://downloads.wordpress.org/plugin/ska-blocks.1.2.10.zip)
[Live Preview](https://ast.wordpress.org/plugins/ska-blocks/?preview=1)
* [Details](https://ast.wordpress.org/plugins/ska-blocks/#description)
* [Reviews](https://ast.wordpress.org/plugins/ska-blocks/#reviews)
* [Installation](https://ast.wordpress.org/plugins/ska-blocks/#installation)
* [Development](https://ast.wordpress.org/plugins/ska-blocks/#developers)
[Support](https://wordpress.org/support/plugin/ska-blocks/)
## Description
**ska-blocks** plugin provides a seamless **Tailwind CSS integration** with the
WordPress Block Editor.
Manage Tailwind classes on blocks with an intuitive UI,
making it possible to **implement any Tailwind-based website design** directly in
the Block Editor with **no build step**, template files or third party page builders.
The plugin comes with low level blocks that can represent any HTML element, which
makes it possible to convert custom HTML to blocks and makes the Gutenberg editor
incredibly flexible.
[Live demo on WordPress playground](https://wordpress.org/plugins/ska-blocks/?preview=1)
[Website](https://ska-blocks.com/?utm_source=wordpress.org) [Read the docs](https://ska-blocks.com/docs/?utm_source=wordpress.org)
#### Features
* **Enter any Tailwind class** – the plugin compiles the CSS for it and enqueues
it in the block editor and front end.
* **No bloat** – any classes you don’t use on the page don’t get loaded, only Tailwind
theme and properties are loaded globally, optionally Tailwind’s preflight can
be included as well.
* **Responsive** – easily target any breakpoint in the block editor.
* **Flexible** – full control to utilize all HTML elements with any HTML attributes
and styles – tailor custom solutions with no need for page builder bloat.
* **Convert HTML to blocks** – have an existing TailwindCSS-based design? Convert
it to blocks automatically, use UI to fine-tune it and have less-technical users
easily modify text content in a simple WYSIWYG environment.
* **Presets & Variations** – create reusable sets of classes, or blocks.
* **AI integration** – generate Tailwind HTML using AI and convert it to blocks
on the spot.
#### Blocks
* **Text** – any HTML element that contains rich text.
* **Element** – any HTML element that contains other elements.
* **Tailwind** – convert Tailwind HTML to blocks – find HTML from the web or generate
with AI.
* **Image** – render an image, placeholder, SVG, featured image, Lottie.
* **Gallery** – render multiple images with simple markup.
### External services
When using AI this plugin connects to an API endpoint to communicate with various
AI models. No external connection is made until you enter your own API key and specifically
interact with the AI feature of the “Tailwind” block. Request is made when you press“
Generate” and include your written prompt and the contents of the Tailwind block.
This service is provided by “OpenRouter”: [terms of use](https://openrouter.ai/terms),
[privacy policy](https://openrouter.ai/privacy).
## Screenshots
* [[
* [[
* [[
* [[
## Installation
#### Install via admin dashboard
1. Go to your **WordPress admin dashboard -> Plugins**.
2. Click “Add New”.
3. Click “Upload Plugin”.
4. Select the plugin zip file.
5. Click “Install Now”.
6. Activate the plugin from **WordPress admin dashboard -> Plugins**.
#### Manual install via FTP upload
1. Upload the folder “ska-blocks” from the plugin zip file to your WordPress installations’`../
wp-content/plugins` folder.
2. Activate the plugin from **WordPress admin dashboard -> Plugins**.
## FAQ
### How to use AI
Get a free API key from OpenRouter.ai, enter it to plugin options at **Settings -
> ska-blocks -> Options -> AI** and enter the model you wish to use (you can find
free to use models on OpenRouter website).
Insert the “Tailwind” block and press
the “AI” button on the toolbar to enter your prompt. You can switch between HTML
or Preview mode to see what the GPT generated and click on the AI button again to
have the AI make adjustments. Once ready you can convert the HTML to blocks by hitting“
Convert to blocks”.
### Browser support
ska-blocks uses **Tailwind 4** which supports the following browsers:
* Chrome
111 (released March 2023) * Safari 16.4 (released March 2023) * Firefox 128 (released
July 2024)
## Reviews
### [Very good plugin](https://wordpress.org/support/topic/very-good-plugin-3022/)
[hunthunt](https://profiles.wordpress.org/hunthunt/) 23, Ochobre de 2025
This is a very useful plugin. It can use the free OpenRouter AI API. You can generate
content with its built-in AI, or you can use an external AI and then import the
generated content. The plugin can convert HTML and Tailwind CSS into a Gutenberg
block. Content generated by an external AI can also be imported and converted. Previously,
my workflow for building a Gutenberg layout with AI was to generate it externally,
review the result, have the external AI convert it to Gutenberg code, and then copy
it into Gutenberg to see the final effect. Now, with this plugin, some of these
manual steps are simplified. The result is now almost the same as the effect after
converting it to a block. It also has a built-in preview function for HTML and Tailwind
CSS, so I don’t need to use an external AI to first convert it to the Gutenberg
code version just to see how it will look.
[ Read all 1 review ](https://wordpress.org/support/plugin/ska-blocks/reviews/)
## Contributors & Developers
“ska-blocks – TailwindCSS for Block Editor” is open source software. The following
people have contributed to this plugin.
Contributors
* [ ska-dev ](https://profiles.wordpress.org/skadev/)
[Translate “ska-blocks – TailwindCSS for Block Editor” into your language.](https://translate.wordpress.org/projects/wp-plugins/ska-blocks)
### Interested in development?
[Browse the code](https://plugins.trac.wordpress.org/browser/ska-blocks/), check
out the [SVN repository](https://plugins.svn.wordpress.org/ska-blocks/), or subscribe
to the [development log](https://plugins.trac.wordpress.org/log/ska-blocks/) by
[RSS](https://plugins.trac.wordpress.org/log/ska-blocks/?limit=100&mode=stop_on_copy&format=rss).
## Changelog
#### 1.2.10
* Requires WP 6.8 (for `array_any` polyfill).
* Tested with WP 6.9.
* Added “Role” option to Gallery block – allows to specify assistive technologies
behavior for the gallery.
* Added “Cover” option to Gallery block – allows to easily apply `object-fit: cover`
to gallery images.
* Added “Responsive” option to Gallery block – allows to control whether `srcset`
and `sizes` are added to gallery images.
* Custom links for gallery images in Gallery block can now include an `aria-label`
for the link.
* Fixed bug in Gallery block with “Gallery wrapper” option disabled (e.g. a gallery
rendered in a slider) added its’ Tailwind classes to the first gallery image
instead.
* Breaking change – Gallery block images no longer have the default `attachment-{
$size} size-{$size}` classes, but you can use the `ska_blocks_gallery_image_attr`
filter to add them back if needed.
* Display Image block icon name in List view.
* Added live preview to SVG edit modal.
* Use more reliable method for applying `srcset` and `sizes` to background images.
* Preloading images in head now works for images that have a `srcset`.
* Added new image loading mode – LCP – adds `fetchpriority="high"` and `decoding
="sync"`.
* Fix sideloaded posts results missing in REST results due to insufficient permissions
to “edit” non-existent posts.
* Add missing bare value support for `Top / right / bottom / left` utilities.
* Removed OpenRouter fallback model option.
#### 1.2.9
* Fix server-side registration of `ska/text` block.
* The “Default” variant can now be renamed to transfer the current value(s) to
another variant such as `sm` or `hover`.
* Declared interactivity clientNavigation support for blocks.
* Clear Cache Enabler cache when updating options.
* Added admin dashboard widget for quick editing dynamic content.
* Update Query Filters to apply to all publicly queryable post types.
* Added option to target variables to root, body and parent, added option to duplicate
variables.
* Fix search results offering presets in contexts they can’t be inserted.
* Cache and load Tailwind preflight from a CSS file by default.
* Query filters can now apply to main query.
* Image block can now render a low-res placeholder background.
* Image block and Background block support can now pre-load images in head.
* Add Query ID to sideloader.
* Block option panels now remember whether they’re collapsed or not.
* Added “Repeater” appender.
* Added `.htaccess` file for serving `.wasm` file with proper `Content-Type` and`
Cache-Control`.
#### 1.2.8
* Update Tailwind properties.
* Ensure all media queries are rendered later than other queries.
* Added fix for WPML translation replacing some characters with `wpml_curved` and`
encoded_tag_closed`.
#### 1.2.7
* Update packages.
* Update Tailwind to 4.1.4, better compatibility with Safari 15.
* Revert HEX colors to oklch colors with %.
* Moved Tailwind colors back to static theme (as CSS variables rather than inline
reference) so they can utilize new polyfills.
#### 1.2.6
* Use HEX colors by default for better browser support.
#### 1.2.5
* Added error messages when LightningCSS fails to initialize.
* Enqueue inline styles using `wp_enqueue_style` and `wp_add_inline_style`.
* Added info about External services to readme.
#### 1.2.4
* Changes to build system.
#### 1.2.3
* Update to Tailwind 4.0.9.
#### 1.2.2
* Remove legacy migrations, Tailwind 3.
#### 1.2.1
* Dynamic link values, such as `#ska-link--front-page` can now be used as blocks’
custom attribute values.
* Try: experimental variant modifiers (`>` and `^`) that can be used within selectors.
In a selector `[&>.a]:[&>.b]` adding a class `hover:text-red` would produce `[&
>.a]:[&>.b]:hover:text-red` meaning that red text would be applied when hovering`.
b`, but prepending the variant with `<` (.a]:hover:[&>.b]:text-red`. Prepending `^` moves the variant to
the top.
* Added `ska_blocks_user_dynamic_link` filter for modifying dynamic link output
server-side.
* Added AI support to Tailwind block via OpenRouter.
#### 1.2
* Use Tailwind 4.
* Use LightningCSS instead of PostCSS.
* Presets and variations now use plugin options rather than custom post types.
* Added support for inset-ring, inset-shadow, font-stretch.
* Added support for rotate/scale/translate in 3D space.
* Added support for perspective, perspective origin, backface visibility, transition
behavior.
* Added support for transition behavior.
* Added support for container queries.
* Added missing support for margin/padding/inset/etc inline-start/end.
* Added experimental support for linear/conic/radial gradients.
* Functionality moved to theme: formats, template select, toolbar, device preview,
grouping with element block.
* Move important modifier `!` to the end, not the beginning.
* Gallery block images now have a simpler `image` class alongside the `wp-block-
ska-gallery__image` class.
* Experimental: use native CSS nesting for sandboxing blocks’ CSS, with a toggle
in Advanced Inspector Controls.
* Primary/secondary/plain colors light and dark variants now use values derived
with color-mix by default.
* Menu block now supports anchor, custom class name and attributes.
* Menu block can now render WC Layered Nav widget and active filters.
* Classes can be now moved to the parent block directly, without specifying a selector.
* Image block now has role options.
* Added Query filters for WC product categories, Sample blog posts and Sample testimonials.
* Slider block with “Controls outside” option now renders wrapper in the block
editor not just front end.
* Added utility function `ska_blocks_preset($slug)` which loads preset’s CSS and
returns its’ class name.
#### 1.1.4
* Permissions and capabilities management.
* Condition block now uses a whitelist for callable PHP functions.
* Fix variations not persisting for server-side registered blocks.
#### 1.1.3
* Increase `editor:` variant specificity.
* Added “Cover” option for Image block which effectively applies `w-full h-full
object-cover rounded-[inherit] aspect-[inherit]` to a wrapped image.
* Menu block can now render Taxonomies.
* Menu block can now render as an Accordion.
* Gallery block with lazyloading enabled can specify how many images from the start
to load eagerly.
* Language switcher block uses available languages in the editor.
* Transforming Post title block to Post data block now retains the HTML heading
tag.
* Updated device preview button styles to be more subtle and have a larger hitbox.
* Added “Cut selector” menu item for selectors.
* Added `editor-selected` variant which should be used in combination with `editor`
variant, e.g. `hidden editor:editor-selected:block`.
* Try default `grid place-items-center size-6` for Icon block instead of `w-6 h-
auto`.
* Fix updating Font size arbitrary value when no line height is selected.
* Added a select for selecting a page template quickly.
* Automatically order screen variants from smallest to largest when adding them.
#### 1.1.2
* Lightbox block now works with core Gallery and Image blocks.
* Added option to lazyload images in Gallery block.
* Updated available Google fonts.
* Fixed bug with wrong class names generated for variables in nested selectors.
* Code block now supports displaying a header, language label and copy button.
* Compatible core blocks now retain Tailwind attributes when transforming from
one block to another.
* Added ability to wrap blocks in a Lightbox block by using a transform.
* Adding a selector now navigates to it automatically.
* Render custom class names in block label for Element and Text blocks.
* Transforming Heading block to Text block now retains the tag name.
* Added option to disable block appender for Element, Conditions, Condition, Slider,
Slide and Lightbox blocks.
* Fix Post data block not rendering in template editor.
* Make front page active in the menu block in the editor.
* Featured image block can now optionally override image ID from post meta.
* Deprecated QueryOverrides in favor of QueryFilters.
* Added style caching.
* Remove ska-blocks related attributes from WC blocks HTML markup.
* Added “Placeholder” setting to “ska/text” block.
* Added generic block setting to not render the block on the front end.
* Added generic block setting to hide the block in the editor when it’s not selected.
#### 1.1.1
* Defer Google fonts by default with an option to not defer.
* Added option to swap Google Fonts URLs with Bunny Fonts.
* Fix warning when displaying an image with a lightbox when the media file has
been deleted.
## Meta
* Version **1.2.10**
* Last updated **3 meses ago**
* Active installations **50+**
* WordPress version ** 6.8 or higher **
* Tested up to **6.9.4**
* PHP version ** 8.1 or higher **
* Language
* [English (US)](https://wordpress.org/plugins/ska-blocks/)
* Tags
* [AI](https://ast.wordpress.org/plugins/tags/ai/)[blocks](https://ast.wordpress.org/plugins/tags/blocks/)
[fse](https://ast.wordpress.org/plugins/tags/fse/)[gutenberg](https://ast.wordpress.org/plugins/tags/gutenberg/)
[tailwind](https://ast.wordpress.org/plugins/tags/tailwind/)
* [Advanced View](https://ast.wordpress.org/plugins/ska-blocks/advanced/)
## Ratings
5 out of 5 stars.
* [ 1 5-star review ](https://wordpress.org/support/plugin/ska-blocks/reviews/?filter=5)
* [ 0 4-star reviews ](https://wordpress.org/support/plugin/ska-blocks/reviews/?filter=4)
* [ 0 3-star reviews ](https://wordpress.org/support/plugin/ska-blocks/reviews/?filter=3)
* [ 0 2-star reviews ](https://wordpress.org/support/plugin/ska-blocks/reviews/?filter=2)
* [ 0 1-star reviews ](https://wordpress.org/support/plugin/ska-blocks/reviews/?filter=1)
[Your review](https://wordpress.org/support/plugin/ska-blocks/reviews/#new-post)
[See all reviews](https://wordpress.org/support/plugin/ska-blocks/reviews/)
## Contributors
* [ ska-dev ](https://profiles.wordpress.org/skadev/)
## Support
Got something to say? Need help?
[View support forum](https://wordpress.org/support/plugin/ska-blocks/)
## Donate
Would you like to support the advancement of this plugin?
[ Donate to this plugin ](https://buymeacoffee.com/skadev)