DaisyUI

DaisyUI is becoming one of the most popular add-ons for TailwindCSS — and for a good reason. It takes the power of Tailwind’s utility classes and turns them into simple, beautiful, ready-to-use components. Buttons, cards, alerts, forms, modals… everything is already styled, consistent, and theme-ready.

Instead of spending hours piecing together utilities for every button or layout, DaisyUI lets you focus on building your product. It gives you a clean design foundation, built-in themes (including dark mode), and a set of components that feel modern without forcing you into a rigid design system.

Whether you’re creating a small project or a full-blown app, DaisyUI speeds up the process, keeps your interface consistent, and removes a lot of repetitive styling work — all while staying fully compatible with Tailwind.

Installation

Link to official installation: https://daisyui.com/docs/install/

@plugin "daisyui";

We are calling plugin from esm.sh. This means that you can also call it as

@plugin "https://esm.sh/daisyui/";

you are done.

Your code will look something like this:

@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/";

Know issues

DaisyUI adds its own reset styles, which can cause the body inside the iframe to become smaller than the WordPress Editor UI. You can fix this easily by adding:

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