How to Use Tailwind CSS in WordPress

By Marko Krstić · Published 25 Sep 2026 · Last reviewed 2 Oct 2026

Tailwind CSS works in WordPress the same way it works everywhere: it scans your source for utility class names and compiles only those into one CSS file. But WordPress stores much of that source in the database, which is why the way you integrate it matters. There are three ways to do it, and they suit different sites.

How Tailwind works (in one paragraph)

Tailwind looks at your HTML, PHP and JavaScript, finds every class name you use, and generates CSS for exactly those classes. That’s why the final CSS is small. In WordPress the tricky part is that class names live in many places: theme templates, the block editor, page builders and the database. Whatever method you choose has to see all of them.

Why WordPress is different from a normal Tailwind project

In a normal project, every class name sits in a file. Tailwind’s docs describe the scan plainly: it “treats all of your source files as plain text” and looks for anything that could be a class name.

A WordPress site keeps only part of its markup in files:

• Theme templates and PHP are files. A build tool can scan them.
• Posts and pages are rows in the database (wp_posts). A class typed into a block’s “Additional CSS class(es)” field is stored there.
• Page builders such as Bricks and Oxygen store their layouts as data in the database too.
• Many hosts have no Node.js, and clients who edit content won’t run a build.

Tailwind CSS is not a CSS file you enqueue. It is a compiler that produces a CSS file from the classes it finds, and a compiler that can’t see your database produces a stylesheet with holes in it.

Option 1: the CDN script (for testing only)

Add Tailwind’s browser build to your theme’s <head>:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

It compiles classes in the visitor’s browser, so you can try Tailwind in minutes. Tailwind’s documentation says the Play CDN “is designed for development purposes only, and is not intended for production”: every visitor downloads the compiler and waits for it to run, and your site depends on a third-party CDN.

Option 2: a build step in your theme (no plugin)

This is the classic developer setup with the Tailwind CLI (Node.js required).

1. In your theme folder, install Tailwind:

npm install tailwindcss @tailwindcss/cli

1. Create src/input.css. In Tailwind v4, configuration lives in CSS, and Tailwind finds the template files in your theme folder on its own:

@import "tailwindcss";

@theme {
  --color-brand: #3b82f6;
}

1. Build the CSS and watch for changes:

npx @tailwindcss/cli -i ./src/input.css -o ./dist/style.css --watch

1. Enqueue dist/style.css in functions.php like any stylesheet.

This produces a small, fast CSS file. The catch: it only sees classes in the files you point it at. Classes typed into the block editor or a page builder live in the database, so they won’t be generated unless you find a way to scan them. And every change needs the build running on a machine with Node.js.

Option 3: Winden (no Node.js, works with builders)

Winden is the Tailwind CSS plugin we build at DPlugins, developed by Marko Krstić. It runs the Tailwind v4 compiler inside WordPress, in two modes (how Winden works):

• Development mode: the compiler runs in the browser while you build, so classes you add show up instantly, with no Node.js and no build step. The compiler and the official plugins (typography, forms, container queries) ship with Winden, so there’s no CDN dependency.
• Production mode: Winden serves one pre-compiled CSS file with only the classes you use.
• It finds classes with its own scanner. The compiler runs in the browser, so there is nothing to point at files by hand. When you save a post or page, Winden reads the classes from its content. It also reads menus, widgets, and Scripts Organizer and FanCoolo code.
• Builders (Winden Pro): separate crawlers read the data Bricks, Oxygen Classic, Oxygen 6, Elementor and Builderius save, so classes typed in a builder end up in the CSS.
• Theme files (Winden Pro): in the files scanner settings you select the folders to scan and the file types to include. If you select nothing, it scans your active theme and its parent (PHP, HTML, JS, JSX, TS, TSX and Twig files). Folders like node_modules and vendor are skipped.
• Design tokens without code: the Wizard is a visual editor for colors, font sizes, spacing, border radius and breakpoints. It writes the @theme configuration for you.

Which one should you use?

	CDN script	Build step	Winden
Setup time	Minutes	An hour+	Minutes
Node.js needed	No	Yes	No
Production-ready	No	Yes	Yes
Sees classes in the block editor / builders	Yes (at runtime)	No, unless you add scanning	Yes
Visual design tokens	No	No	Yes (Wizard)

Use the CDN to experiment. Use a build step if you’re a developer shipping a classic theme where all markup lives in files. If you build with the block editor or a page builder, or hand sites over to clients who won’t run Node.js, Winden does the compiling inside WordPress.

What changed with Tailwind CSS v4 for WordPress

Tailwind CSS v4.0 was released on 22 January 2025. Two changes matter for WordPress themes:

• Configuration lives in CSS. You “customize and extend the framework directly in CSS instead of a JavaScript configuration file”, with the @theme directive. There is no tailwind.config.js to maintain.
• Automatic content detection. Template files “are discovered automatically, with no configuration required”. Files in .gitignore and node_modules are skipped.

Neither change solves the database problem: automatic detection reads files, not wp_posts. That is why Winden uses its own scanner.

Which builder fits a Tailwind workflow?

A Tailwind-friendly builder is not one that ships a Tailwind option. It is one where you can type classes quickly and where a compiler can find every class you typed.

	Gutenberg	Bricks	Oxygen (Classic / 6)	Classic PHP theme
Where you type classes	“Additional CSS class(es)” field per block	Class field per element	Class field per element	In the template files
Where the markup is stored	Post content in the database	Builder data in the database	Builder data in the database	Files
Can a file-based build see the classes?	No	No	No	Yes
What you need	A compiler that reads saved content	A compiler that reads builder data	A compiler that reads builder data	The Tailwind CLI, or Winden’s files scanner

Three common cases:

• A developer team with Git and a classic theme: the build step (Option 2) is enough.
• Designers working in Bricks or Oxygen: you need a compiler that hooks into the builder. See the setup for Bricks and Oxygen.
• A content-heavy site edited by clients in the block editor: see Tailwind in the Gutenberg block editor.

Still choosing a builder? The general comparisons are Oxygen vs Gutenberg and Bricks vs Gutenberg.

Tailwind in your editor or builder

Each of these guides goes deeper on one setup:

• Tailwind CSS in the Gutenberg block editor
• Tailwind CSS in Bricks Builder
• Tailwind CSS in Oxygen Builder
• Fluid typography and spacing with Tailwind
• daisyUI components in WordPress
• Flowbite components in WordPress
• CSS class autocomplete in the block editor

FAQ

Can I use Tailwind CSS in WordPress without Node.js?

Yes. The browser build (Option 1) needs no Node.js but is for testing only. For production, use a plugin that compiles inside WordPress, such as Winden. The trade-off is that the plugin, not your own build script, decides how classes are found.

Does Tailwind CSS work with Gutenberg, Bricks and Oxygen?

Yes. Tailwind classes are plain class names, so any editor that lets you add a class can use them. The question is whether your compiler sees the classes the builder saves in the database.

Is the Tailwind Play CDN safe for a production WordPress site?

Tailwind says no: the Play CDN “is designed for development purposes only, and is not intended for production”. It compiles on every page view in the visitor’s browser and adds a third-party dependency.

What is the difference between Tailwind v3 and v4 for WordPress themes?

In v4 the configuration moved from tailwind.config.js into CSS (@theme), and template files are detected automatically.

Sources

• Tailwind CSS v4.0, Tailwind Labs, 22 January 2025 (read 2 October 2026)
• Detecting classes in source files, Tailwind CSS documentation (read 2 October 2026)
• Play CDN, Tailwind CSS documentation (read 2 October 2026)
• Winden: How does it work?, DPlugins documentation (read 2 October 2026)

Tested with Tailwind CSS 4.3.3 (the build step in Option 2).

Related guides

• Design Tokens in Figma with Variables: A Practical Guide: Colors, spacing and type as Figma variables.
• How to Generate a 50–950 Color Palette in Figma: One brand color, a full shade ramp.

Browse all WordPress tutorials.