css next.js tailwind-css tailwind-css-4 daisyui

DaisyUI not working in Next.js 14 with Tailwind CSS 4.1.8 - Tailwind config file created manually

I'm using the latest versions of Tailwind CSS and Next.js 14.

I noticed that the tailwind.config.ts file was not generated automatically, so I created it manually:

In my global.css, I only have this line:

@import "tailwindcss";

The Tailwind styles work fine, but DaisyUI styles are not applied at all.

Here is my package.json dependencies related to Tailwind and DaisyUi:

{
  "devDependencies": {
    "daisyui": "^5.0.43",
    "tailwindcss": "^4.1.8",
    "@tailwindcss/postcss": "^4",
    "autoprefixer": "^10.4.21"
  }
}

I'm not sure why DaisyUI is not working. What could be missing in my setup?

What I've done:

Manually created tailwind.config.ts with DaisyUI included in the plugins array
Installed DaisyUI via npm and confirmed it's listed in package.json
Tailwind utilities work fine

What's not working:

DaisyUI components and themes are not applying

Expected behavior:

DaisyUI components and styles (e.g., btn, alert, card, etc.) should work as expected alongside Tailwind.

Solution

Breaking Changes from TailwindCSS v4

I noticed that the tailwind.config.ts file was not generated automatically, so I created it manually

Good catch, but the solution was wrong. It's important to check the breaking changes before manually intervening. Since v4, Tailwind no longer uses tailwind.config.js. And there are many other breaking changes compared to v3 - here are some useful links:

DaisyUI v5 (for TailwindCSS v4)

It looks like you did everything right, except you didn't add the DaisyUI plugin in v4.

global.css

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

Besides, I see you're loading TailwindCSS with PostCSS - make sure you've added the Tailwind PostCSS plugin to the postcss.config.mjs file (important: it has an .mjs extension).

Get started TailwindCSS with PostCSS

postcss.config.mjs

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

TailwindCSS v3 with DaisyUI v4 (not recommended)

If you want to use TailwindCSS v3, only DaisyUI v4 is compatible with it, and they will no longer receive future support. These need to be installed with specific versions, and you'll have to rely on older documentation.