How to Use daisyUI Components in WordPress

Tailwind gives you utility classes; daisyUI adds ready-made component classes on top: btn, card, badge, alert, modal, and built-in themes including dark mode. Instead of stacking fifteen utilities to make a button, you write btn btn-primary. It’s one of the most popular Tailwind add-ons, and it works in WordPress with any builder.

What daisyUI gives you

• Components as classes: btn, card, navbar, tabs, badge, alert, steps and many more.
• Variants: btn-primary, btn-outline, btn-sm, card-bordered…
• Themes: swap the whole color scheme, including a dark theme, without touching your markup.
• Still Tailwind: mix component classes with utilities (btn btn-primary w-full md:w-auto).

Adding daisyUI to Tailwind v4

In Tailwind v4, plugins are loaded in CSS with @plugin. daisyUI’s official install is:

@import "tailwindcss";
@plugin "daisyui";

With a Node.js build that means npm install daisyui in your theme. Without Node.js, the plugin can be loaded from a CDN build of the package.

Setting it up with Winden

Winden compiles Tailwind inside WordPress, so there’s nothing to install with npm. Add the plugin in Winden’s CSS, and Winden loads it from esm.sh:

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";
@plugin "https://esm.sh/daisyui/";

Save, and daisyUI’s classes are available everywhere Winden compiles: Gutenberg, Bricks, Oxygen and Elementor.

Block editor fix

daisyUI ships its own reset styles, which can make the body inside the block editor’s iframe shorter than the editor itself. Add this to Winden’s styles to fix it:

.block-editor-iframe__body {
    min-height: 100vh;
}

Using the components

In any block or builder element, add the component classes. For example, in Gutenberg a Button block with the classes btn btn-primary, or a Group block with card bg-base-100 shadow-xl p-6 around a heading, text and button. In Bricks or Oxygen, type the same classes into the element’s class field.

Tips

• Pick a theme early. daisyUI themes define your colors; changing theme later restyles everything at once, which is great, as long as you didn’t hard-code colors elsewhere.
• Combine with your tokens. Winden’s Wizzard colors and daisyUI’s theme colors can coexist; decide which one is your source of truth.
• Want interactive components with JavaScript (dropdowns, date pickers)? See Flowbite in WordPress.