\n\nFrom what I understand, according to the error logged, the issue is caused by the resulting css tree having nested `@source` declarations.\n\n### Additional context\n\nI'm working on migrating an existing website that was built using Bootstrap (lol) and I'd like to use layers to ensure the newer css gets a higher priority than the old one.\n\nUsing `@import \"tailwindcss\" layer(tailwindcss);` results in all the tailwind stuff being scoped to the `tailwindcss` layer (eg. `tailwindcss.theme`, `tailwindcss.base`…).\n\nHowever, when I try to do the same for `@import \"@nuxt/ui\"` I get the previously mentioned error.\n\nI've tried using both the same and a different layer name than the one I use for tailwind but I still get the error.\n\n### Logs\n\n```shell-script\nERROR Pre-transform error: @source cannot be nested. 12:42:31 PM\n Plugin: @tailwindcss/vite:generate:serve\n File: /project/workspace/app/assets/css/main.css\n```",[3139,3142,3145],{"name":3140,"color":3141},"bug","d73a4a",{"name":3143,"color":3144},"v3","49DCB8",{"name":3146,"color":3147},"triage","ffffff",4503,"nuxt","ui","open","`@import \"@nuxt/ui\" layer(layer-name);` not working","2025-07-11T13:35:06Z","https://github.com/nuxt/ui/issues/4503",0.62776935,{"description":3157,"labels":3158,"number":3162,"owner":3149,"repository":3150,"state":3163,"title":3164,"updated_at":3165,"url":3166,"score":3167},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v22.16.0\n- Nuxt Version: 3.17.5\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@10.12.1\n- Builder: -\n- User Config: modules, devtools, css, content, ui, runtimeConfig, future, compatibilityDate, vite, hooks, dayjs, eslint, pwa, supabase, tiptap\n- Runtime Modules: @nuxt/eslint@1.4.1, @nuxt/ui-pro@3.2.0, @vueuse/nuxt@13.4.0, @nuxt/icon@1.15.0, @nuxt/image@1.10.0, @nuxtjs/supabase@1.5.3, @vite-pwa/nuxt@1.0.4, dayjs-nuxt@2.1.11, nuxt-mcp@0.2.3, @nuxtjs/mdc@0.17.0, nuxt-tiptap-editor@2.3.1, @nuxt/content@3.6.1\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.17.5\n\n### Reproduction\n\nDoesn't need reproduction because it's already happening on the official nuxt ui website.\n\n### Description\n\nUnfortunately, due to the way Tailwind/nuxtUi generates colors, it doesn’t create proper fallback colors. It only outputs the @supports colors, without generating the corresponding fallback with the correct opacity.\n\nHere’s an example using bg-red-500/20:\n\n\u003Cimg width=\"522\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/b618470b-292f-42bf-9f62-a39e418f15df\" />\n\nAnd here’s another example with bg-success/20:\n\n\u003Cimg width=\"520\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/72ca102b-10fa-40ae-aa59-c6f18831d4dd\" />\n\nAs you can see, the fallback color is missing the intended 20% opacity.\n\n### Additional context\n\nI've noticed this Issue when I worked on older browser and the whole page looks odd. I'm looking into the Issue currently and could need an helping and. ",[3159,3160,3161],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3146,"color":3147},4432,"closed","Fallback colors are not generated properly for tailwind utilities","2025-07-03T15:25:40Z","https://github.com/nuxt/ui/issues/4432",0.6145537,{"description":3169,"labels":3170,"number":3174,"owner":3149,"repository":3150,"state":3163,"title":3175,"updated_at":3176,"url":3177,"score":3178},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.3.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.25.0\n- Nitro Version: 2.11.9\n- Package Manager: pnpm@9.15.4\n- Builder: -\n- User Config: compatibilityDate, devtools, modules, future, css, runtimeConfig\n- Runtime Modules: @nuxt/ui@3.1.0, @nuxt/image@1.10.0, nuxt-auth-utils@0.5.20, nuxt-svgo@4.0.17\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\n/* main.css */\n@import \"tailwindcss\" theme(static);\n@import \"@nuxt/ui\";\n\n### Description\n\nWhen using the css above, the neutral color (eg. --color-neutral-50, --color-neutral-100, etc ) tailwind variables are missing in the output css file (in :root, :host {} )\nThey are there when not importing @nuxt/ui\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3171,3172,3173],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3146,"color":3147},3986,"tailwindcss neutral color missing","2025-05-02T09:58:19Z","https://github.com/nuxt/ui/issues/3986",0.6236439,{"description":3180,"labels":3181,"number":3185,"owner":3149,"repository":3149,"state":3163,"title":3186,"updated_at":3187,"url":3188,"score":3189},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v20.14.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.1\n- Nitro Version: 2.11.9\n- Package Manager: bun@1.2.9\n------------------------------\n\n### Reproduction\n\nRelated repository:\nhttps://github.com/serhii-chernenko/daisyui-issue\n\n- Correct styles with the Nuxt 3 single application: https://daisyui-issue-ui-playground.pages.dev\n- Broken styles with the latest versions and Nuxt 3 layers architecture: https://daisyui-issue.pages.dev\n- Fixed styles after downgrading packages such as `tailwindcss` and `@tailwindcss/vite` to the version `4.0.3`\n - Preview: https://preview.daisyui-issue.pages.dev\n - PR: https://github.com/serhii-chernenko/daisyui-issue/pull/1\n\n### Describe the bug\n\nIn combination of Nuxt 3 Layers architecture, DaisyUI library, and upgrading Tailwind CSS I have the issue described below.\n\nI also created the same issue to the DaisyUI and Tailwind repos:\n- https://github.com/saadeghi/daisyui/issues/3775\n- https://github.com/tailwindlabs/tailwindcss/issues/17648\n\nBut 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.\n\n## Steps to reproduce\n\n### Clone repo and install packages\n\n```\ngit clone git@github.com:serhii-chernenko/daisyui-issue.git\nbun install\n```\n\n### Verify the installed versions related to `tailwind`\n\n```bash\nbun pm ls --all | grep tailwindcss\n├── ...\n├── @tailwindcss/vite@4.1.3\n├── tailwindcss@4.1.3\n```\n\n### Run a single Nuxt 3 application\n\n```\ncd src/layers/ui\nbun run dev\n```\n\nOpen http://localhost:3000\n\nExpected result (buttons do nothing, it's just UI):\n\n\nDeployed version is available here:\nhttps://daisyui-issue-ui-playground.pages.dev\n\n### Run the end application in Nuxt 3 Layers architecture\n\n```\ncd ../../../\nbun run build:app # it's necessary to generate the `wrangler.json` file\nbun run dev:app\n```\n\nOpen http://localhost:3000\n\nExpected result (DaisyUI styles completely broken, but Tailwind's styles work as expected):\n\n\nDeployed version is available here:\nhttps://daisyui-issue.pages.dev\n\n### Downgrade `tailwindcss` and `@tailwindcss/vite` to `4.0.3`\n\nAdd to the root `package.json` file the next content:\n```json\n\"overrides\": {\n \"@tailwindcss/vite\": \"4.0.3\",\n \"tailwindcss\": \"4.0.3\"\n}\n```\n\nOr just switch to the branch:\n```bash\ngit checkout fix/downgraded-tailwind-and-tailwind-vite-versions\n```\n\nPR is available here:\nhttps://github.com/serhii-chernenko/daisyui-issue/pull/1\n\nReinstall packages:\n```\nbun install\n```\n\nVerify packages again:\n```bash\nbun pm ls --all | grep tailwindcss\n├── ...\n├── @tailwindcss/vite@4.0.3\n├── tailwindcss@4.0.3\n```\n\n### Run the end application in Nuxt 3 Layers architecture again\n\n```\nbun run build:app # it's necessary to generate the `wrangler.json` file\nbun run dev:app\n```\n\n### Additional context\n\nI had the same issue with Node v20. There's no difference in the package manager.\n\n### Logs\n\n```shell-script\n\n```",[3182],{"name":3183,"color":3184},"pending triage","E99695",31773,"Latest `tailwindcss` and `@tailwindcss/vite` packages don't compile DaisyUI styles in Nuxt 3 Layers architecture","2025-04-11T20:20:35Z","https://github.com/nuxt/nuxt/issues/31773",0.62557316,{"description":3191,"labels":3192,"number":3200,"owner":3149,"repository":3149,"state":3163,"title":3201,"updated_at":3202,"url":3203,"score":3204},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v20.11.1`\r\n- Nuxt Version: `3.11.2`\r\n- CLI Version: `3.11.1`\r\n- Nitro Version: `2.9.6`\r\n- Package Manager: `yarn@4.2.2`\r\n- Builder: `-`\r\n- User Config: `devtools`, `debug`, `hooks`, `modules`, `plugins`, `nitro`, `runtimeConfig`, `dayjs`, `postcss`, `app`, `css`, `apollo`, `carousel`, `tour`, `vue`, `routeRules`\r\n- Runtime Modules: `@nuxtjs/tailwindcss@6.12.0`, `@nuxtjs/device@3.1.1`, `@nuxt/image@1.4.0`, `@pinia/nuxt@0.5.1`, `@pinia-plugin-persistedstate/nuxt@1.2.0`, `dayjs-nuxt@2.1.9`, `vue3-carousel-nuxt@1.1.1`, `@nuxtjs/apollo@5.0.0-alpha.14`, `nuxt-tour@0.0.9`, `@nuxtjs/i18n@8.3.1`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\nCannot reproduce the issue either on new repo or stackblitz\r\n\r\nUsing \r\n\r\n \"nuxt\": \"^3.11.2\",\r\n \"@nuxtjs/tailwindcss\": \"^6.12.0\",\n\n### Describe the bug\n\nIn the below image in nuxt 3 bg-transparent is added at last but it is overridden by bg-yocket-neutral-100\r\n\r\n\u003Cimg width=\"647\" alt=\"Screenshot 2024-05-28 at 5 46 06 PM\" src=\"https://github.com/nuxt/nuxt/assets/45727492/081685a9-7c97-4f4e-8449-e3f0bfbc0719\">\r\n\r\nIn nuxt 2 the behaviour was opposite\r\n\u003Cimg width=\"1115\" alt=\"Screenshot 2024-05-28 at 5 52 22 PM\" src=\"https://github.com/nuxt/nuxt/assets/45727492/f4d6d5f5-d323-4312-bb37-46a4fb52f776\">\r\n\r\n\r\nThis same thing is happening throughout the project\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3193,3196,3197],{"name":3194,"color":3195},"3.x","29bc7f",{"name":3183,"color":3184},{"name":3198,"color":3199},"needs reproduction","FBCA04",27385,"Tailwindcss added at last is not applied","2024-05-30T05:43:05Z","https://github.com/nuxt/nuxt/issues/27385",0.644104,{"description":3206,"labels":3207,"number":3213,"owner":3149,"repository":3149,"state":3163,"title":3214,"updated_at":3215,"url":3216,"score":3217},"### Environment\n\n\"dependencies\": {\n \"@tailwindcss/vite\": \"^4.1.11\",\n \"nuxt\": \"^3.17.4\",\n \"tailwindcss\": \"^4.1.11\",\n },\n\n### Reproduction\n\n#\n\n### Describe the bug\n\nwhen I click NuxtLinks the tailwind css page is broken. the header and footer remains intech! this only happens in npm run generate\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3208,3209,3210],{"name":3183,"color":3184},{"name":3198,"color":3199},{"name":3211,"color":3212},"closed-by-bot","ededed",32906,"NuxtLink gives Broken Tailwind CSS at run Generate. On dev mode it works","2025-08-19T02:10:26Z","https://github.com/nuxt/nuxt/issues/32906",0.64625645,{"labels":3219,"number":3222,"owner":3149,"repository":3149,"state":3163,"title":3223,"updated_at":3224,"url":3225,"score":3226},[3220,3221],{"name":3194,"color":3195},{"name":3183,"color":3184},13475,"Tailwind module not working","2023-01-19T16:57:29Z","https://github.com/nuxt/nuxt/issues/13475",0.64815843,{"description":3228,"labels":3229,"number":3232,"owner":3149,"repository":3150,"state":3163,"title":3233,"updated_at":3234,"url":3235,"score":3236},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v24.2.0\n- Nuxt Version: 3.17.5\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@10.12.1\n- Builder: -\n- User Config: compatibilityDate, devtools, modules, css\n- Runtime Modules: @nuxt/ui@3.1.3\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt/Nuxt UI\n\n### Version\n\nv3.17.5/v3.1.3\n\n### Reproduction\n\n```\npnpm create nuxt {project-name}\n\nskip setting up git and don't add any modules\n\npnpm add @nuxt/ui\n```\nSetup as per the docs for nuxt.config and css\n\nrun `pnpm run dev`\n\n### Description\n\nI've tried server times with the same results using `pnpm`. `npm` seem to work fine following the same steps.\n```console\nPre-transform error: Can't resolve 'tailwindcss' in /demo/assets/css'\n Plugin: @tailwindcss/vite:generate:serve\n File:/demo/assets/css\n```\n\n### Additional context\n\nJust cursor and warp and both product the same results.\n\n### Logs\n\n```shell-script\n\n```",[3230,3231],{"name":3140,"color":3141},{"name":3143,"color":3144},4339,"Issue using pnpm 10.12.1: Can't resolve 'tailwindcss'","2025-06-16T12:54:09Z","https://github.com/nuxt/ui/issues/4339",0.6497826,{"labels":3238,"number":3240,"owner":3149,"repository":3149,"state":3163,"title":3241,"updated_at":3242,"url":3243,"score":3244},[3239],{"name":3194,"color":3195},11875,"TailwindCSS only works on client-side","2023-01-19T15:48:25Z","https://github.com/nuxt/nuxt/issues/11875",0.65056473,{"description":3246,"labels":3247,"number":3250,"owner":3149,"repository":3149,"state":3163,"title":3251,"updated_at":3252,"url":3253,"score":3254},"### Environment\r\n\r\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v16.14.2`\r\n- Nuxt Version: `3.0.0`\r\n- Nitro Version: `1.0.0`\r\n- Package Manager: `npm@7.17.0`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-nlp6fz?file=app.vue\r\n\r\n### Describe the bug\r\n\r\nI don't know if this is the right place to ask this, but I have been trying to use tailwind with nuxt 3.0.0 but it doesn't seem to work.\r\n\r\nI have tried both using the `nuxt/tailwind` and the `tailwindcss` package but doesn't work, hence why I suspect this has to do with nuxt.\r\n\r\n### Additional context\r\n\r\n\r\nThe applied class appears as a plain text\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3248,3249],{"name":3194,"color":3195},{"name":3183,"color":3184},15540,"TailwindCSS doesn't seem to work with Nuxt v.3.0.0","2023-01-19T17:53:32Z","https://github.com/nuxt/nuxt/issues/15540",0.65076965,["Reactive",3256],{},["Set"],["ShallowReactive",3259],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fAg1k0W6XpK7LaeP7sqeosxkQZiq7uHpC5n5dy2NhRg8":-1},"/nuxt/ui/4049"]