How to Use Tailwind CSS in WordPress

Tailwind CSS lets you style everything with small utility classes like p-4, text-lg or grid-cols-3 instead of writing custom CSS for every element. It works well with WordPress, but WordPress doesn’t know about Tailwind, so something has to turn the classes you use into a CSS file. There are three ways to do that, 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.

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 own documentation says it’s for development, not 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

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

In your theme folder, install Tailwind:

npm install tailwindcss @tailwindcss/cli

Create src/input.css. In Tailwind v4, configuration lives in CSS. Tell it where your templates are with @source:

@import "tailwindcss";
@source "../**/*.php";

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

Build the CSS and watch for changes:

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

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 brings Tailwind CSS v4 into WordPress itself.

Development mode: the Tailwind v4 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 official plugins (typography, forms, container queries) ship with Winden, so there’s no CDN dependency.
Production mode: Winden serves a pre-compiled, purged CSS file, so visitors only download the CSS you actually use.
It finds classes everywhere: it scans your theme files (PHP, HTML, JS, Twig…), reads classes when you save posts and pages, and hooks into Gutenberg, Bricks, Oxygen and Elementor to pick up classes as you type them.
Design tokens without code: the Wizzard is a visual editor for colors (with automatic shades), fluid font sizes, spacing, border radius and breakpoints. It writes the @theme configuration for you.
Autocomplete for class names inside the builders, based on your own configuration.

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 (Wizzard)

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.

Tailwind CSS for WordPress, without a build step

Winden compiles Tailwind v4 inside WordPress and works with Gutenberg, Bricks, Oxygen and Elementor.

See Winden