Latest `tailwindcss` and `@tailwindcss/vite` packages don't compile DaisyUI styles in Nuxt 3 Layers architecture

[serhii-chernenko]

What version of Tailwind CSS are you using?

For example: v4.1.3

What build tool (or framework if it abstracts the build tool) are you using?

• nuxt: 3.16.2
• vite: 6.2.6
• daisyui: 5.0.18
• tailwindcss: 4.1.3
• @tailwindcss/vite: 4.1.3

What version of Node.js are you using?

• Node: 20
• Bun: 1.2.9

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

Related repository:
https://github.com/serhii-chernenko/daisyui-issue

• Correct styles with the Nuxt 3 single application: https://daisyui-issue-ui-playground.pages.dev
• Broken styles with the latest versions and Nuxt 3 layers architecture: https://daisyui-issue.pages.dev
• Fixed styles after downgrading packages such as tailwindcss and @tailwindcss/vite to the version 4.0.3
  • Preview: https://preview.daisyui-issue.pages.dev
  • PR: fix(tailwind): downgrade version to 4.0.3 serhii-chernenko/daisyui-issue#1

Describe your issue

In combination of Nuxt 3 Layers architecture, DaisyUI library, and upgrading Tailwind CSS I have the issue described below.

I also created the same issue to the DaisyUI and Nuxt repos:

• bug: latest tailwindcss and @tailwindcss/vite packages don't compile DaisyUI styles in Nuxt 3 Layers architecture saadeghi/daisyui#3775
• Latest tailwindcss and @tailwindcss/vite packages don't compile DaisyUI styles in Nuxt 3 Layers architecture nuxt/nuxt#31773

But honestly, I'm not sure to which one it's really related. It'd be nice to involve Tailwind, Nuxt, Vite, and Daisy together, to find a root cause of this.

Steps to reproduce

Clone repo and install packages

git clone git@github.com:serhii-chernenko/daisyui-issue.git
bun install

Verify the installed versions related to tailwind

bun pm ls --all | grep tailwindcss
├── ...
├── @tailwindcss/vite@4.1.3
├── tailwindcss@4.1.3

Run a single Nuxt 3 application

cd src/layers/ui
bun run dev

Open http://localhost:3000

Expected result (buttons do nothing, it's just UI):

Deployed version is available here:
https://daisyui-issue-ui-playground.pages.dev

Run the end application in Nuxt 3 Layers architecture

cd ../../../
bun run build:app # it's necessary to generate the `wrangler.json` file
bun run dev:app

Open http://localhost:3000

Expected result (DaisyUI styles completely broken but Tailwind's styles work as expected):

Deployed version is available here:
https://daisyui-issue.pages.dev

Downgrade tailwindcss and @tailwindcss/vite to 4.0.3

Add to the root package.json file the next content:

"overrides": {
  "@tailwindcss/vite": "4.0.3",
  "tailwindcss": "4.0.3"
}

Or just switch to the branch:

git checkout fix/downgraded-tailwind-and-tailwind-vite-versions

PR is available here:
serhii-chernenko/daisyui-issue#1

Reinstall packages:

bun install

Verify packages again:

bun pm ls --all | grep tailwindcss
├── ...
├── @tailwindcss/vite@4.0.3
├── tailwindcss@4.0.3

Run the end application in Nuxt 3 Layers architecture again

bun run build:app # it's necessary to generate the `wrangler.json` file
bun run dev:app

Open http://localhost:3000

Expected result (DaisyUI styles work as expected):

Deployed version is available here:
https://preview.daisyui-issue.pages.dev

[philipp-spiess]

Hey! That's because a change we had to make in the @tailwidncss/vite extension in 4.0.8 (more info on why can be found here. But basically the Vite extension will only scan the current Vite working directory by default which will be the folder containing the Vite config (I believe it's either /src/apps/app or /layers/core/data in your case, but I'm not sure! I see that the .css file is in /layers/core/ui. Since that already contains the CSS file, the easiest fix would probably be to add @source '.'; to that CSS file to say to the Vite extension: Oh hey please also scan the directory this CSS file is in. You might need to do something similar with /layers/apps/app but I'm not sure. Do you mind giving this a try?

[serhii-chernenko]

Hey @philipp-spiess,
Thanks for the prompt response!

I tried, but it didn't work. Please, check the PR if it's correctly implemented regarding what you mentioned:
https://github.com/serhii-chernenko/daisyui-issue/pull/2/files

I see many monorepo projects were affected by the mentioned change. I'm completely confused as many other people on how the patch version 4.0.8 could do any significant bugs like this one and break plenty of existing projects. It had to be well announced, documented, and released even as a major version.

Even the @source '.'; stuff could help me somehow, I have no idea how to use it in a production-ready app. Hard-coding or auto-generation files per each layer breaks the main idea of dynamic extending and enabling the layers/packages. Total frustration.

I prefer to stay at the 4.0.3 version because at least it works. I also tried 4.0.7 and it doesn't work for me as well.

[wongjn]

Seems to look a bit better applying the following patch:

diff --git a/src/layers/ui/assets/css/main.css b/src/layers/ui/assets/css/main.css
index 1c93580..ff8470d 100644
--- a/src/layers/ui/assets/css/main.css
+++ b/src/layers/ui/assets/css/main.css
@@ -1,5 +1,7 @@
 @import "tailwindcss";
 
+@source "../../";
+
 @plugin "daisyui" {
   themes: lofi --default, dim --prefersdark;
 }

[serhii-chernenko]

@wongjn wow, it helped. Tested on this test repo and in real project. Both work. Thank you a lot!
I believe it's an acceptable solution for my case. Probably, the current issue could be closed. I don't have other questions related to this topic.