Blog

Tailwind CSS v4 + DaisyUI in Next.js — setup guide

Set up Tailwind CSS v4 with DaisyUI v5 in your Next.js project. CSS-first config, custom themes, and component patterns for a modern UI.

What changed in Tailwind v4

Tailwind CSS v4 drops tailwind.config.js entirely. All configuration now lives in your CSS file using @theme and @utility directives. This means faster builds, no JavaScript config, and a simpler mental model: your styles live where styles belong — in CSS.

Step 1: Install dependencies

Terminal
npm install tailwindcss @tailwindcss/postcss daisyui

Update your postcss.config.js (or .mjs) to use the new PostCSS plugin:

postcss.config.mjs
// postcss.config.mjs
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

Step 2: CSS-first configuration

In app/globals.css, replace the old @tailwind directives with:

app/globals.css
@import "tailwindcss";

@plugin "daisyui";

@theme {
  --color-brand: #570df8;
  --font-display: "Inter", sans-serif;
}

Variables defined in @theme become utility classes automatically. --color-brand gives you text-brand, bg-brand, etc.

Step 3: DaisyUI components

DaisyUI v5 works with Tailwind v4 out of the box. Use component classes like btn, card, input directly in your JSX. Themes are applied via data-theme on the <html> element. Choose from 30+ built-in themes or create your own.

Why this combination works

Tailwind gives you utility-first styling with zero runtime CSS. DaisyUI adds semantic component classes so you write btn btn-primary instead of 10 utility classes. Together with Next.js Server Components, your pages ship minimal CSS and load fast — which matters for both SEO and user experience.

Tailwind v4 + DaisyUI ready

Delfy uses Tailwind CSS v4 with DaisyUI v5, fully configured with custom themes and 20+ styled components. No setup needed.

See the components
Tailwind CSS v4 + DaisyUI in Next.js — setup guide | Delfy.dev Blog