\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```",[3188,3189,3192],{"name":3172,"color":3173},{"name":3190,"color":3191},"v3","49DCB8",{"name":3175,"color":3176},4503,"`@import \"@nuxt/ui\" layer(layer-name);` not working","2025-09-18T13:05:59Z","https://github.com/nuxt/ui/issues/4503",0.63597083,{"description":3199,"labels":3200,"number":3208,"owner":3178,"repository":3179,"state":3209,"title":3210,"updated_at":3211,"url":3212,"score":3213},"### Environment\n\n- Operating System: Darwin\r\n- Node Version: v20.6.1\r\n- Nuxt Version: 3.13.0\r\n- CLI Version: 3.13.1\r\n- Nitro Version: 2.9.7\r\n- Package Manager: pnpm@8.6.12\r\n- Builder: -\r\n- User Config: compatibilityDate, devtools, modules\r\n- Runtime Modules: @nuxt/ui@2.18.4\r\n- Build Modules: -\n\n### Version\n\n2.18.4\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-rzyn6r?file=assets%2Fcss%2Ftailwind.css\n\n### Description\n\nI tried to use `@apply` in `\u003Cstyle>` block in my vue files. But I got the error that my class does not exists.\r\n```\r\n[vite-node] [plugin:vite:css] [CssSyntaxError] ./app.vue:9:2 : The `bar` class does not exist. If `bar` is a custom class, make sure it is defined within a `@layer` directive.\r\n```\r\nI also tested it without `@nuxt/ui` module but only `@nuxtjs/tailwindcss` module, which works perfectly fine.\r\nI looked for config in nuxt UI document, but didn't find anything that could help fixing this.\n\n### Additional context\n\nHere's one reproduction with only `@nuxtjs/tailwindcss` installed\r\nhttps://stackblitz.com/edit/nuxt-ui-eadnqo?file=nuxt.config.ts\n\n### Logs\n\n_No response_",[3201,3202,3203,3206],{"name":3172,"color":3173},{"name":3175,"color":3176},{"name":3204,"color":3205},"closed-by-bot","ededed",{"name":3207,"color":3205},"stale",2099,"closed","custom tailwind style in `@layer` directive cannot be used within `\u003Cstyle>` block","2025-06-18T09:06:17Z","https://github.com/nuxt/ui/issues/2099",0.61445177,{"description":3215,"labels":3216,"number":3220,"owner":3178,"repository":3178,"state":3209,"title":3221,"updated_at":3222,"url":3223,"score":3224},"### 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```",[3217],{"name":3218,"color":3219},"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.62986904,{"labels":3226,"number":3231,"owner":3178,"repository":3178,"state":3209,"title":3232,"updated_at":3233,"url":3234,"score":3235},[3227,3230],{"name":3228,"color":3229},"3.x","29bc7f",{"name":3218,"color":3219},13475,"Tailwind module not working","2023-01-19T16:57:29Z","https://github.com/nuxt/nuxt/issues/13475",0.6300019,{"labels":3237,"number":3240,"owner":3178,"repository":3178,"state":3209,"title":3241,"updated_at":3242,"url":3243,"score":3244},[3238,3239],{"name":3228,"color":3229},{"name":3218,"color":3219},13385,"Cannot use Tailwindcss classes from composables","2023-01-19T16:54:19Z","https://github.com/nuxt/nuxt/issues/13385",0.63068146,{"description":3246,"labels":3247,"number":3250,"owner":3178,"repository":3179,"state":3209,"title":3251,"updated_at":3252,"url":3253,"score":3254},"### 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```",[3248,3249],{"name":3172,"color":3173},{"name":3190,"color":3191},4049,"Tailwind colors not working in Nuxt Layers","2025-05-19T10:29:55Z","https://github.com/nuxt/ui/issues/4049",0.63279647,{"description":3256,"labels":3257,"number":3263,"owner":3178,"repository":3178,"state":3209,"title":3264,"updated_at":3265,"url":3266,"score":3267},"### Environment\r\n\r\n- Operating System: Linux\r\n- Node Version: v18.17.0\r\n- Nuxt Version: 3.10.0\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@9.6.7\r\n- Builder: -\r\n- User Config: devtools, postcss, css\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\nCheck out this commit, run `npm run dev` and add pairs:\r\n\r\nhttps://github.com/mktcode/trading-assistant/commit/0ef592d39133d7af8030331b894a95727af117d9\r\n\r\nThe second pair has wrong classes. It's missing the classes of the wrapper div and the button is blue instead of red.\r\nIf you remove the PairSelect component or wrap it in another element, it fixes the display issue. So it has something to do with it. But what?\r\n\r\n### Describe the bug\r\n\r\n\r\n\r\nFor some reason classes aren't applied correctly in this v-for loop of a custom component. If it was the first or last element I could think of a reason but the second element just weirdly not having the classes.... I'm a bit puzzled. Maybe it's because it's monday but maybe it's because of Nuxt doing something weird? Idk. Maybe it's not even nuxt but Vue itself.\r\n\r\n\r\n\r\nIt's always the second div that takes the classes of the select component.\r\n\r\nIt is because the v-for is not wrapped in it's own parent element but I think I never had such a weird issue with that.",[3258,3259,3260],{"name":3228,"color":3229},{"name":3218,"color":3219},{"name":3261,"color":3262},"upstream","E8A36D",25626,"Tailwind classes missing in v-for loop.","2024-02-05T11:55:12Z","https://github.com/nuxt/nuxt/issues/25626",0.63428754,{"description":3269,"labels":3270,"number":3273,"owner":3178,"repository":3178,"state":3209,"title":3274,"updated_at":3275,"url":3276,"score":3277},"### 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_",[3271,3272],{"name":3228,"color":3229},{"name":3218,"color":3219},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.6365786,{"description":3279,"labels":3280,"number":3284,"owner":3178,"repository":3179,"state":3209,"title":3285,"updated_at":3286,"url":3287,"score":3288},"### Environment\n\n```\r\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v20.12.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: npm@10.5.0\r\n- Builder: -\r\n- User Config: ssr, devtools, modules, eslint, tailwindcss, ui, image, pwa, runtimeConfig, $production\r\n- Runtime Modules: @nuxt/eslint@0.3.10, @nuxt/image@1.6.0, @nuxt/ui@2.15.2, @vueuse/nuxt@10.9.0, @vite-pwa/nuxt@0.7.0\r\n- Build Modules: -\r\n------------------------------\r\n```\n\n### Version\n\n2.15.2\n\n### Reproduction\n\n[Error happening in nuxt/ui](https://stackblitz.com/edit/github-jq7nbz?file=nuxt.config.ts,tailwind.config.ts)\r\n[Error not happening with nuxtjs/tailwindcss module only](https://stackblitz.com/edit/github-swxuvb?file=tailwind.config.ts)\n\n### Description\n\nAdding a tailwind plugin that utilizes arbitrary values does not work via tailwind.config file.\r\nIt outputs a warning in the console\r\n```\r\nThe class mask-point-via-[3rem_calc(100%-3rem)] is ambiguous and matches multiple utilities.\r\n\r\nIf this is content and not a class, replace it with mask-point-via-[3rem_calc(100%-3rem)] to silence this warning.\r\n```\r\n\r\nIf I provide the same plugin in the nuxt.config, it is working fine there.\r\n\r\n\r\nI already tested if this is a problem with the nuxtjs/tailwindcss module, but providing the plugin in the tailwind.config file work just fine there. (c.f. second reproduction link)\r\n\r\nCan this be an issue with how nuxt/ui is consuming the tailwind config?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3281,3282,3283],{"name":3172,"color":3173},{"name":3204,"color":3205},{"name":3207,"color":3205},1739,"tailwind plugin in tailwind config file not working","2025-06-19T02:12:35Z","https://github.com/nuxt/ui/issues/1739",0.64928055,["Reactive",3290],{},["Set"],["ShallowReactive",3293],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fjybkT0a7chTjSUhHLth5VFFy6QDUmO9sVa5blz-JwXE":-1},"/nuxt/ui/5104"]