\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```",[3171,3174,3177],{"name":3172,"color":3173},"bug","d73a4a",{"name":3175,"color":3176},"v3","49DCB8",{"name":3178,"color":3179},"triage","ffffff",4503,"nuxt","ui","open","`@import \"@nuxt/ui\" layer(layer-name);` not working","2025-09-18T13:05:59Z","https://github.com/nuxt/ui/issues/4503",0.62382764,{"description":3189,"labels":3190,"number":3193,"owner":3181,"repository":3182,"state":3194,"title":3195,"updated_at":3196,"url":3197,"score":3198},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.12.0`\n- Nuxt Vesion: `3.17.1`\n- Nitro version: `2.11.11`\n- Package Manager: `pnpm@10.8.0`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.0\n\n### Reproduction\n\nhttps://github.com/rudrokhanpro/nuxt-ui-tailwind-in-layers-bug\n\n### Description\n\nHello!\nI have encountered a bug affecting TailwindCSS colors in Nuxt Layers.\nI have attached a repo that mimics a project I'm working on.\n\nThere is a first root Nuxt app with NuxtUI called `zero`.\nThere is also a second Nuxt app that `extends: [\"../zero\"]`.\nFinally, there is a third and last Nuxt app that `extends: [\"../one\"]`.\n\nIf we run the `one` project, we can access [`/one`](http://localhost:3000/one), a page that displays components both from the `zero` and `one` projects. \nIf we run the `two` project, we can access [`/two`](http://localhost:3000/two), a page that displays components both from the `zero`, `one` and `two` projects.\n\nYou will notice that the page seems \"empty\" but in reality there are button whose styles are not being set correctly. It seems that it only affects colors because if we inspect the elements we can see that the padding and some hover styles are being applied correctly.\n\n\n\nTo fix this issue, I had to safelist all colors in the root project:\n\n```css\n/* assets/css/main.css */\n@source inline(\"{hover:,disabled:,focus:,}bg-{red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose,slate,gray,zinc,neutral,stone}-{50,{100..900..100},950}\");\n```\n\nAnd we get the following result:\n\n\n\n### Additional context\n\nI have been migrating and updating my project to Nuxt UI v3 since it was in alpha and it has been a great experience thanks to the contributors of this repository. \n\nThis bug was introduced with Tailwind v4.0.8. I checked every single release and it seems related to the TailwindCSS import and `@theme static {}`\n\n### Logs\n\n```shell-script\n\n```",[3191,3192],{"name":3172,"color":3173},{"name":3175,"color":3176},4049,"closed","Tailwind colors not working in Nuxt Layers","2025-05-19T10:29:55Z","https://github.com/nuxt/ui/issues/4049",0.5782484,{"description":3200,"labels":3201,"number":3206,"owner":3181,"repository":3182,"state":3194,"title":3207,"updated_at":3208,"url":3209,"score":3210},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.15.0\n- Nuxt Version: 4.1.2\n- CLI Version: 3.28.0\n- Nitro Version: 2.12.5\n- Package Manager: pnpm@10.14.0\n- Builder: -\n- User Config: modules, alias, imports, components, runtimeConfig, nitro, $production, routeRules, app, css, sitemap\n- Runtime Modules: -\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Package\n\nv4.x\n\n### Version\n\n^4.0.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/laughing-rain-9w5trh?workspaceId=ws_SWV8m3pabuMSYNque63JoS\n\n### Description\n\nIf the Nuxt UI module is set up in a layer, and that (or another) layer also contains components that utilize tailwind classes, these classes are not compiled, and thus styles are not applied in the target app.\n\nIn the attached reproduction you'll find:\n- A `common` layer that includes \n - the `nuxt/ui` module in it's `nuxt.config.ts`\n - A css file that imports tailwind and nuxt ui\n - Two components: one with a unique class that's only used in the layer, and one with a class that's also used in the app\n- An app that:\n - imports the layers css file in its own css entrypoint\n - Has a single AppComponent\n - page that renders all three components\n\nNote that only the classes that are used directly in the app itself are compiled\n\n### Additional context\n\nI have not tested this issue with Nuxt 3 and/or NuxtUI 3.\n\n### Logs\n\n```shell-script\n\n```",[3202,3203,3204],{"name":3172,"color":3173},{"name":3178,"color":3179},{"name":3205,"color":3176},"v4",5104,"Tailwind class compiler does not work in Nuxt Layers","2025-09-29T15:07:00Z","https://github.com/nuxt/ui/issues/5104",0.60482746,{"labels":3212,"number":3219,"owner":3181,"repository":3181,"state":3194,"title":3220,"updated_at":3221,"url":3222,"score":3223},[3213,3216],{"name":3214,"color":3215},"3.x","29bc7f",{"name":3217,"color":3218},"pending triage","E99695",13475,"Tailwind module not working","2023-01-19T16:57:29Z","https://github.com/nuxt/nuxt/issues/13475",0.611584,{"description":3225,"labels":3226,"number":3230,"owner":3181,"repository":3182,"state":3194,"title":3231,"updated_at":3232,"url":3233,"score":3234},"### 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. ",[3227,3228,3229],{"name":3172,"color":3173},{"name":3175,"color":3176},{"name":3178,"color":3179},4432,"Fallback colors are not generated properly for tailwind utilities","2025-07-03T15:25:40Z","https://github.com/nuxt/ui/issues/4432",0.6203228,{"description":3236,"labels":3237,"number":3240,"owner":3181,"repository":3182,"state":3194,"title":3241,"updated_at":3242,"url":3243,"score":3244},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.17.1\n- Nuxt Version: 4.0.1\n- CLI Version: 3.27.0\n- Nitro Version: 2.12.4\n- Package Manager: npm@11.5.1\n- Builder: -\n- User Config: compatibilityDate, devtools, modules, css\n- Runtime Modules: @nuxt/ui@3.3.0\n- Build Modules: -\n\n\n\nnpm list\nC:\\xxx>npm list\nnuxt-app@ C:\\xxx\n+-- @nuxt/ui@3.3.0\n+-- @nuxtjs/tailwindcss@6.14.0\n+-- autoprefixer@10.4.21\n+-- nuxt@4.0.1\n+-- postcss@8.5.6\n+-- tailwindcss@3.4.17\n+-- typescript@5.8.3\n+-- vue-router@4.5.1\n`-- vue@3.5.18\n\n\n### Version\n\nv3.3.0\n\n### Reproduction\n\n-\n\n### Description\n\nAfter following the installation guide https://ui.nuxt.com/getting-started/installation/nuxt\n\nI'm getting this error:\nCan't resolve 'tailwindcss' in 'C:\\xxx\\app\\assets\\css' at createError (C:/xxx/node_modules/h3/dist/index.mjs:71:15) at C:/xxx/node_modules/@nuxt/vite-builder/dist/index.mjs:403:21) at async processMessage (C:/xxx/node_modules/@nuxt/vite-builder/dist/index.mjs:386:30)\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3238,3239],{"name":3172,"color":3173},{"name":3178,"color":3179},4617,"Can't resolve 'tailwindcss'","2025-07-28T11:08:23Z","https://github.com/nuxt/ui/issues/4617",0.6212096,{"description":3246,"labels":3247,"number":3251,"owner":3181,"repository":3182,"state":3194,"title":3252,"updated_at":3253,"url":3254,"score":3255},"### 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```",[3248,3249,3250],{"name":3172,"color":3173},{"name":3175,"color":3176},{"name":3178,"color":3179},3986,"tailwindcss neutral color missing","2025-05-02T09:58:19Z","https://github.com/nuxt/ui/issues/3986",0.6212638,{"description":3257,"labels":3258,"number":3261,"owner":3181,"repository":3181,"state":3194,"title":3262,"updated_at":3263,"url":3264,"score":3265},"### 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_",[3259,3260],{"name":3214,"color":3215},{"name":3217,"color":3218},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.6226855,{"description":3267,"labels":3268,"number":3270,"owner":3181,"repository":3181,"state":3194,"title":3271,"updated_at":3272,"url":3273,"score":3274},"### 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```",[3269],{"name":3217,"color":3218},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.62687504,{"description":3276,"labels":3277,"number":3283,"owner":3181,"repository":3181,"state":3194,"title":3284,"updated_at":3285,"url":3286,"score":3287},"### 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_",[3278,3279,3280],{"name":3214,"color":3215},{"name":3217,"color":3218},{"name":3281,"color":3282},"needs reproduction","FBCA04",27385,"Tailwindcss added at last is not applied","2024-05-30T05:43:05Z","https://github.com/nuxt/nuxt/issues/27385",0.6279309,["Reactive",3289],{},["Set"],["ShallowReactive",3292],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fauLsYR5vf-ZH__D26PJHuLvRxp02Jh-igA4vHJV3oTs":-1},"/nuxt/ui/5184"]