Using Tailwind CSS in WordPress Themes

Tailwind CSS and WordPress come from different worlds. WordPress themes traditionally use semantic CSS classes, while Tailwind is utility-first. But for custom themes — especially headless setups — Tailwind brings massive productivity gains.

The Setup

I use Vite as the build tool with Tailwind v4. The tailwind.config points to your theme template files:

// vite.config.ts
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
    plugins: [tailwindcss()],
});

In your main CSS file, import Tailwind:

@import "tailwindcss";

@theme inline {
    --color-primary: #0a0f17;
    --color-accent-purple: #8139ff;
    --color-accent-cyan: #00c6d8;
}

The Content Problem

WordPress content from the editor comes as raw HTML without Tailwind classes. You need the Typography plugin for prose styling:

<article className="prose prose-invert max-w-none">
    <div dangerouslySetInnerHTML={{ __html: post.content }} />
</article>

The prose class applies sensible typography defaults to headings, paragraphs, lists, and code blocks within WordPress content.

Design Tokens

The real power is defining your design system once in Tailwind and using it everywhere. Colors, spacing, typography, breakpoints — all defined in one place and available across every component. Changes propagate instantly without hunting through CSS files.