How to Use Tailwind CSS in the Gutenberg Block Editor

The block editor already lets you add your own CSS classes to any block. That makes it a natural fit for Tailwind CSS: instead of writing custom CSS for every section, you type grid md:grid-cols-3 gap-8 and you’re done. The catch is making sure the CSS for those classes actually exists, in the editor and on the front end.

Where to add classes in Gutenberg

Select any block, open the sidebar, expand Advanced, and type your classes into Additional CSS class(es):

p-8 rounded-2xl bg-slate-50 md:grid md:grid-cols-2 gap-8

The classes are saved with the block and output on the front end. On their own they do nothing: something has to generate the CSS.

The problem: classes in the database

A normal Tailwind setup scans your files for class names. Classes typed into the block editor aren’t in files; they’re saved in the database, inside post content. So a standard build step won’t see them, and your styled blocks look unstyled on the live site.

There are two ways around it:

1. Only use classes that also appear in your theme files, or keep a “safelist” of classes Tailwind always generates. That works for a small set, but becomes a chore as the site grows.
2. Generate CSS from what’s actually in the content. That means scanning posts too, or compiling as you edit.

Setting it up with Winden

Winden compiles Tailwind CSS v4 inside WordPress, and understands the block editor:

• It reads classes from your content. When you save a post or page, Winden picks up the classes in it, and it follows the editor in real time while you type.
• It works in the editor, too. In development mode the compiler runs in the browser, so blocks look right in Gutenberg as soon as you add a class.
• Production mode serves one pre-compiled, purged CSS file to visitors.

Autocomplete

Enable it under Winden → Settings → Enable Autocomplete → Gutenberg. Class names from your configuration then autocomplete in the block editor’s class field, so you don’t have to remember whether it’s rounded-xl or rounded-2xl in your design system.

Use theme values

Winden can load WordPress’s own values into Tailwind: FSE font families, font sizes and spacing (each has an “Include FSE…” toggle in the Wizzard), and Gutenberg’s breakpoints. That way text-lg in Tailwind and “Large” in the block editor mean the same thing.

It also works the other way: under Settings → Pass Wizard data to Builder and Theme → Gutenberg, the colors, font sizes and spacing you define in Winden’s Wizzard appear in Gutenberg’s own color, typography and spacing pickers, as global values. Change a color in the Wizzard and it updates everywhere.

Don’t remove Gutenberg’s own styles

It’s tempting to deregister the core block styles and style everything with Tailwind. In practice it breaks the editor, because many editor styles depend on them. Keep the core CSS, and if you want Tailwind’s reset, import Preflight into the base layer:

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

Tips

• Use patterns for sections you repeat (hero, CTA, card grid), so the class list lives in one place.
• Prefer design tokens over raw values: bg-brand instead of bg-[#3b82f6], so a redesign is one change.
• Combine with custom blocks for components editors reuse a lot. See how to create a custom Gutenberg block without React.

Setting up Tailwind for the first time? Start with how to use Tailwind CSS in WordPress.