← All posts

Winden 4: Tailwind CSS Plugins, Class Helper and HTML Editing

winden

Winden 4 is a big release for anyone using Tailwind CSS in Gutenberg. It adds a search for Tailwind plugins, faster class previews, save-to-component, a visual class helper, and an HTML code editor that stays in sync with the block canvas. It also adds two new blocks, Winden Group and Winden Image, so markup copied from Tailwind examples renders the same way in WordPress.

Tailwind plugins without the guesswork

The Style (CSS) tab now has a Plugins (2) button next to Main Style. By default, the stylesheet looks like this:

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

Clicking Plugins opens the Tailwind plugins modal. As the modal explains, plugins are written into the tab as @plugin lines. The two default plugins ship with Winden and work offline. Anything else is fetched from esm.sh when the CSS compiles.

  1. Use the toggles to turn Typography — prose classes for long-form content and Forms — sane defaults for form controls on or off.
  2. Search for a package by name, for example daisyui.
  3. Keep Only packages tagged as Tailwind plugins and Only plugins that support Tailwind 4 checked to filter the results.
  4. Click Add on the package you want. Use View on npm if you want to check the package first.
  5. Once added, a plugin can be disabled or deleted from the same list.

This matters most for new users, who often don't know where Tailwind plugins come from or how to load them.

Hide the editor tabs you don't use

In Winden Settings → Editor, the Editor tabs section lets you drag tabs to reorder them and toggle them off: Style, Config, Wizzard and Style Guide. At least one tab has to stay visible.

The Config tab is only there for Tailwind 3 compatibility, and in most cases you don't need it. If you don't use the Style Guide either, hide both and keep the tabs you actually work with.

Faster class previews in the block editor

A lot of the work went into performance. In the previous version's class field, sliding through suggestions like bg-blue-50 → bg-blue-800 made the preview jump. The old CSS was removed and the new CSS had to be generated before anything showed up. In Winden 4, the Winden Classes panel previews each suggestion instantly while you move through the list. Each color class shows a swatch, and the suggestions are grouped more cleanly.

Override warnings and the ! modifier

When a class is overridden by the editor's default styles, a warning triangle appears in the Winden Classes header and the class is highlighted. You can then add the Tailwind 4 important modifier:

bg-blue-300 p-12! m-12!

You see right away that something is being overridden and can decide whether to deal with it.

Save classes to a component and reuse them

This was one of the most requested features. The Winden Classes panel has upload and download icons in its header.

  1. Add your utility classes to a block.
  2. Click the upload icon to save the classes as a component, and give it a name, for example card.
  3. The block's class list is replaced with card, and Winden generates the rule under the components layer.
  4. Hover the class to see what it contains:
.card {
  @apply bg-blue-300 p-12! m-12!;
}
  1. On another block, click the download icon to see all saved components and apply one. You don't have to remember what you called it.

A visual class helper

Remembering every Tailwind class name is hard when you're starting out, so Winden 4 adds a visual helper. It opens as a Winden Classes sidebar with breakpoints (Default, SM, MD, LG, XL, 2XL), a Hover state, and sections for Layout, Spacing, Background, Typography, Borders, Sizing, Position, Effects, Filters, Transforms and Transitions & Animation.

  • Background opens a palette of every color. Pick one and it writes the class, for example bg-sky-400.
  • Spacing → Padding lets you set All sides, or pick X, Y, Top, Right, Bottom or Left. Choosing Y gives you py-12, and changing the value to py-16 updates the block right away.

Everything the helper sets is written to the class field, so you can also edit it there by hand.

Edit Gutenberg as HTML, with Emmet

For Marko, this is the best part of the release: you can edit Gutenberg like a code editor. Turn on Edit as HTML in the block sidebar ("Open under the canvas, following the selection"). An HTML panel opens with the code for the current block, or for the whole page with the Whole page button.

  • The panel can sit at the bottom or on the side. Side-by-side works better on bigger screens.
  • Selecting code selects the matching blocks, and selecting a block highlights its code.
  • Emmet works. Type div>h1+p, expand it, write inside it and format it, and the blocks update right away.
  • Core blocks have autocomplete, so you don't need to remember their tag names. Adding buttons looked like this:
<div>
<h1>Marko</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. …</p>
</div>
<core-buttons><core-button>Test</core-button><core-button>Marko</core-button></core-buttons>

If you change a button's style from fill to outline, that change is just a class, and Winden picks it up in the code too.

Copy Tailwind examples straight into Gutenberg

Winden 4 aims for full Tailwind compatibility. Marko copied a section from Tailwind's own examples, pasted it into the HTML panel, and it rendered one-to-one in the editor. The only difference was an override that we cleared, and you should set up link styles under your globals.

Full pages work too. In the video, a complete page built in Tailwind Play (header, stats, testimonial, pricing and footer, including inline SVG icons) is pasted in and renders correctly. The only missing pieces were images that weren't available in WordPress. So you can build a whole page with copy and paste.

List View: expand and collapse all

With the native Gutenberg List View, you open nested blocks one arrow at a time. Winden adds expand and collapse all, which opens everything under the selected block at once.

Winden Group and Winden Image blocks

For full Tailwind compatibility, we added group variations, including a Winden Group block. You can switch to it with Transform to Winden Group in the block toolbar. There is also a new Winden Image block.

The reason for Winden Image is the core Image block. It wraps the image in a <figure>. If you add a class in Additional CSS class(es), the class ends up on the figure and not on the img. You can't set the height or aspect ratio directly. You have to target the child image, and the class string gets long.

Winden Image is "just the <img> — no figure, no caption wrapper — so Tailwind classes such as absolute inset-0 object-cover land on the image itself." It can also show the post's featured image with the Use featured image toggle. On the front end, you get a clean img tag with your class applied directly to it.

FAQ

How do I add daisyUI or another Tailwind plugin in Winden 4? Open the Style (CSS) tab, click Plugins, search for the package (for example daisyui) and click Add. Winden writes it into the stylesheet as a @plugin line and fetches it from esm.sh when the CSS compiles. Typography and Forms ship with Winden and work offline.

Do I still need the Config tab in Winden 4? In most cases, no. It's only there for Tailwind 3 compatibility. You can hide it, and the Style Guide tab, under Settings → Editor → Editor tabs.

Can I paste Tailwind UI or Tailwind Play HTML into Gutenberg? Yes. Turn on Edit as HTML, paste the markup into the HTML panel, and Winden turns it into blocks. In the video, both a single section and a full Tailwind Play page render one-to-one. Images need to exist in your media library.

Why don't my classes affect the image in the core Image block? The core Image block wraps the img in a figure, so classes land on the wrapper. Use the new Winden Image block instead. It outputs a plain img tag, so classes like object-cover apply to the image itself.

How do I reuse a set of Tailwind classes across blocks? In the Winden Classes panel, click the upload icon to save the classes as a named component such as card. Winden generates an @apply rule in the components layer. On other blocks, click the download icon to pick from your saved components.

Get Winden → dplugins.com

Related posts