The Tailwind block of ska-blocks WordPress plugin allows communicating with a GPT to generate Tailwind HTML, which can then be converted to WordPress blocks.
API key
ska-blocks uses OpenRouter to facilitate interaction with multiple GPTs through a unified API.
First, set up your OpenRouter.ai API key and a model to use under ska-blocks -> Options -> AI:
Models can be found at OpenRouter -> Models, for example, for the free Dolphin3.0 Mistral 24B model you should enter cognitivecomputations/dolphin3.0-mistral-24b:free to the OpenRouter model option.
You can also enter a fallback model for when the primary model’s providers are down, rate-limited, or refuse to reply due to content moderation.
Add Tailwind block
Add the Tailwind block and press “AI” on the toolbar:
Choose a suggestion or write a prompt:
There’s also an option to pick a different model to use for this specific session.
Once the GPT has returned a response, its’ output will be inserted to the Tailwind block:
You can switch to the Preview tab to see what the HTML looks like when rendered:
Results will vary depending on the model used and your prompt:
To make modifications you can press the AI button again to continue the session and ask for changes.
Once you’re happy with the result you can press Convert to blocks:
Once converted you can remove the Tailwind block and edit the content as blocks:
It’s very easy for anyone to make basic text changes, how ever to make design and layout changes you’ll need to be familiar with the core concepts of Tailwind classes and the WordPress Block Editor.
Alternatives
You can also use any other AI chat service to have it generate Tailwind HTML for you and simply manually paste it to the Tailwind block to convert it to blocks.
What’s the best model to use for Tailwind HTML?
I have no idea, there are so many models out there.
Here’s what DeepSeek R1 thinks:
The GPT-4 model is ideal for generating clean HTML with Tailwind CSS due to its strong grasp of semantic markup and utility-first frameworks. It excels at applying responsive modifiers like md: and lg:, crafting dynamic states with hover: or focus: prefixes, and organizing atomic classes efficiently. Ensure your prompt specifies mobile-first breakpoints and design requirements for optimal class selection.
Downsides to generating UI with GPTs
As AIs always use their own Tailwind classes for common UI elements like buttons, menus and headings your site can become very inconsistent, using various different colors, spacings, font sizes and weights.
It’s recommended to go over all newly AI-generated blocks and try to remove unnecessary font sizes and weights from headings, strip classes from buttons and apply a common “Button” preset instead, things like that.
You can also take parts of the UI and make variations out of them to reuse them as blocks elsewhere on the site.