How to use Tailwind CSS v4 and daisyUI in a block-based WordPress theme?

Block-based WordPress themes make building modern sites easier than ever. But if you’re a developer who loves Tailwind CSS, the question is: how do you add it to a block-based WordPress theme?

We’ll also use daisyUI — to get ready-to-use components and simple styles. Suitable for templates in HTML and PHP.

Good news: with Tailwind CSS v4 and daisyUI components, integration has become even simpler. In this guide, we’ll go through the steps to let you use utility classes and ready-made components directly in WordPress blocks and templates.

Project setup

Let’s assume you already have a starter WordPress block theme (custom or child).

Initialize npm in the theme root if you haven’t yet:

npm init -y

Then install Tailwind CLI v4 and daisyUI:

npm install tailwindcss@latest @tailwindcss/cli@latest daisyui@latest

Configuring Tailwind CSS and daisyUI

In version 4, Tailwind simplified configuration — now sources and plugins can be declared right in CSS.

We already have a style.css file in the root of the child theme — just add the following:

@import "tailwindcss" source(none);

@source "./parts/*.{html,js}";
@source "./woocommerce/**/*.{php}";
@source "./blocks/**/*.{php}";

@plugin "daisyui";

What’s happening here?

• @import “tailwindcss” — includes Tailwind’s base, components, and utilities.
• @source — tells Tailwind where to look for used classes. We add PHP templates and blocks so the purge of unused classes works correctly.
• @plugin “daisyui” — adds daisyUI, which provides ready-made components like buttons, modals, menus, and more.

Scripts in package.json

Add handy commands for building and watching CSS:

"scripts": {
  "css:watch": "npx @tailwindcss/cli -i style.css -o tw.css --watch",
  "css:build": "npx @tailwindcss/cli -i style.css -o tw.css"
}

Now style.css will compile into tw.css.

Enqueuing Tailwind in WordPress

In your theme’s functions.php (or via theme.json if you enqueue there), enqueue the compiled tw.css:

add_action('wp_enqueue_scripts', function(){
  wp_enqueue_style(
    'app',
    get_theme_file_uri('tw.css'),
    [],
    filemtime(get_theme_file_path('tw.css'))
  );
});

This way browsers will always receive the fresh CSS version.

Running the build process

During development:

npm run css:watch

For production (with purging unused classes and minification):

npm run css:build

Using Tailwind + daisyUI in blocks

Now you can use Tailwind utility classes and daisyUI components directly in block markup. For example, in a custom block template:

<div class="bg-base-200 p-6 rounded-lg mb-4">
  Hello, Tailwind + DaisyUI!
</div>
<button class="btn btn-primary">Click me</button>

• bg-base-200 and btn btn-primary are daisyUI classes.
• p-6, rounded-lg, mb-4 are Tailwind utilities.

They work together without conflicts.

daisyUI theme generator

The theme generator helps you quickly configure a palette and interface tokens and get a ready-made theme for your project. Open the daisyUI theme generator, adjust colors, and copy the result[2].

What you can get from the generator:

• A ready theme in CSS custom properties
• A JSON config for daisyUI
• Styles closely adapted to your WordPress theme

Adapt it as needed and paste the resulting CSS into style.css.

Conclusion

With Tailwind v4 and daisyUI you can easily build modern interfaces inside WordPress blocks.

What this combo gives you:

• Clean and optimized CSS (tw.css)
• Access to all Tailwind utility classes
• Ready UI components from daisyUI
• A convenient workflow for developing with block themes

You can spend less time fiddling with styles and more time focusing on design. 🚀

In my case, the full config in style.css looks like this:

/*
Theme Name: @ app
Template: blocksy
Version: 0.250903
*/

@import "tailwindcss" source(none);
@source "./public/*.{html,js}";
@source "./woocommerce/**/*.{php}";
@source "./blocks/**/*.{php}";
@plugin "daisyui";

@plugin "daisyui/theme" {
  name: "corporate";
  default: true;
  prefersdark: false;
  color-scheme: "light";
  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(93% 0 0);
  --color-base-300: oklch(86% 0 0);
  --color-base-content: oklch(22.389% 0.031 278.072);
  --color-primary: oklch(58% 0.158 241.966);
  --color-primary-content: oklch(100% 0 0);
  --color-secondary: oklch(55% 0.046 257.417);
  --color-secondary-content: oklch(100% 0 0);
  --color-accent: oklch(60% 0.118 184.704);
  --color-accent-content: oklch(100% 0 0);
  --color-neutral: oklch(0% 0 0);
  --color-neutral-content: oklch(100% 0 0);
  --color-info: oklch(60% 0.126 221.723);
  --color-info-content: oklch(100% 0 0);
  --color-success: oklch(62% 0.194 149.214);
  --color-success-content: oklch(100% 0 0);
  --color-warning: oklch(85% 0.199 91.936);
  --color-warning-content: oklch(0% 0 0);
  --color-error: oklch(70% 0.191 22.216);
  --color-error-content: oklch(0% 0 0);
  --radius-selector: 0.25rem;
  --radius-field: 0.25rem;
  --radius-box: 0.25rem;
  --size-selector: 0.25rem;
  --size-field: 0.28125rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}