How to Integrate Plugins like 'DaisyUI' with Tailwind CSS v4

[Bilalben23]

As we all know, in previous versions, we simply installed the plugin with npm i daisyui and required it in the tailwind.config.js file. However, in version 4, this has changed and it's no longer needed.

My question is: How do we use plugins like DaisyUI with Tailwind CSS in the new version? I've searched through the documentation but couldn't find any information on this topic. Even DaisyUI's documentation hasn't addressed this change yet.

[wongjn]

The main topic of discussion for v4 + Daisy UI can be found at saadeghi/daisyui#3246. It mentions v4 beta but I believe the documentation there is still relevant.

[solutionsinurarea]

actually Daisy UI does have good docs on it, they're just in the beta since that's where the tailwind 4 support will come https://v5.daisyui.com/docs/v5-beta/

[dobogdas-bu]

I was stumped on this but found you can do it directly in your css file
app.css something like this
@import "tailwindcss";
@plugin "daisyui" {
themes: retro, dark
} ;

[abd-bangash]

omg i have been stuck for like 2 days but this worked gpt gemini all failed thanks

@import "tailwindcss";
@plugin "daisyui" {
themes:
"light", "dark", "cupcake", "bumblebee", "emerald", "corporate",
"synthwave", "retro", "cyberpunk", "valentine", "halloween", "garden",
"forest", "aqua", "lofi", "pastel", "fantasy", "wireframe", "black",
"luxury", "dracula", "cmyk", "autumn", "business", "acid", "lemonade",
"night", "coffee", "winter", "dim", "nord", "sunset"
;
}

[pronix-doc]

The new version of daisyui(still beta version) supports tailwindcss v4.0.
https://v5.daisyui.com/docs/v5-beta/

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

[wongjn]

That's from your editor (I presume) not understanding the Tailwind-specific syntax.

[KH93b]

That's from your editor (I presume) not understanding the Tailwind-specific syntax.

There are plugins for both tailwind and postcss. I'm using vscode

[BennyCarlsson]

If someone else stumbles upon this adding "files.associations": {
"*.css": "tailwindcss"
}
to your settings in vscode when you ahve the Tailwind CSS IntelliSense plugin did the trick

[TheSandSensei]

If someone else stumbles upon this adding "files.associations": { "*.css": "tailwindcss" } to your settings in vscode when you ahve the Tailwind CSS IntelliSense plugin did the trick

Lifesaver. Huge thanks!!!

[om4rAb]

thanks a bunch @BennyCarlsson

[KH93b]

{ "files.associations": { "*.css": "postcss" }, "css.customData": ["./tailwind.json"], "scss.lint.unknownAtRules": "ignore", "css.validate": false, "postcss.validate": false }

did so, the warning went away

[rozsazoltan]

• Tailwind CSS v4 - Unknown at rule @plugin, @custom-variant, @theme in global.css

[keanueu]

In Tailwind CSS v4, the configuration has shifted from JavaScript to CSS-first.

Installation: npm i daisyui@latest

Implementation: Add @plugin "daisyui"; directly into your main CSS file.

Example:

CSS
@import "tailwindcss";
@plugin "daisyui";
Customizing Options:

CSS
@plugin "daisyui" {
themes: light, dark;
prefix: "cv-";
}
This replaces the old require('daisyui') in the tailwind.config.js file.