\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```",[3019,3022,3025],{"name":3020,"color":3021},"bug","d73a4a",{"name":3023,"color":3024},"v3","49DCB8",{"name":3026,"color":3027},"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.668504,{"description":3037,"labels":3038,"number":3045,"owner":3029,"repository":3030,"state":3046,"title":3047,"updated_at":3048,"url":3049,"score":3050},"### Environment\n\nNuxt project info:\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.20.3\r\n- Nuxt Version: 3.12.4\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: pnpm@8.15.6\r\n- Builder: -\r\n- User Config: modules, compatibilityDate\r\n- Runtime Modules: @nuxt/ui@2.18.3\r\n- Build Modules: -\r\n------------------------------\n\n### Version\n\nv2.18.0\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-ktbnby?file=README.md,app.vue,assets%2Fcss%2Ftailwind.css\n\n### Description\n\nBefore the `nuxt-icon` rewrite with `nuxt-ui` 2.18.0 you could write following kind of custom css into `assets/css/tailwind.css`:\r\n```\r\n@layer utilities {\r\n .i-lb {\r\n @apply scale-x-[-1];\r\n @apply i-heroicons-light-bulb;\r\n }\r\n}\r\n```\r\n\r\nAfter 2.18.0 this breaks as the `i-heroicons-light-bulb` class does not exist anymore in that context. \n\n### Additional context\n\nThe goal is to create a custom icon (in this case `i-lb`) that uses existing icon but adds something more necessary, like that scale apply as an example.\n\n### Logs\n\n```shell-script\n[plugin:vite:css] [postcss] /home/projects/nuxt-ui/assets/css/tailwind.css:11:5: The `i-heroicons-light-bulb` class does not exist. If `i-heroicons-light-bulb` is a custom class, make sure it is defined within a `@layer` directive.\n```\n",[3039,3040,3043],{"name":3020,"color":3021},{"name":3041,"color":3042},"closed-by-bot","ededed",{"name":3044,"color":3042},"stale",1998,"closed","Custom CSS rule to apply icon class in tailwind.css not working after 2.18 release","2025-07-30T02:13:39Z","https://github.com/nuxt/ui/issues/1998",0.62752664,{"description":3052,"labels":3053,"number":3063,"owner":3029,"repository":3029,"state":3046,"title":3064,"updated_at":3065,"url":3066,"score":3067},"### 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.",[3054,3057,3060],{"name":3055,"color":3056},"3.x","29bc7f",{"name":3058,"color":3059},"pending triage","E99695",{"name":3061,"color":3062},"upstream","E8A36D",25626,"Tailwind classes missing in v-for loop.","2024-02-05T11:55:12Z","https://github.com/nuxt/nuxt/issues/25626",0.6342428,{"description":3069,"labels":3070,"number":3076,"owner":3029,"repository":3029,"state":3046,"title":3077,"updated_at":3078,"url":3079,"score":3080},"### Environment\n\nnode: v16.15.1\r\nnuxt: ^3.2.0\r\ntailwindcss: ^6.2.0\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-ky7itr\n\n### Describe the bug\n\nHello team,I want to use the style of tailwindcss: https://tailwindcss.com/docs/gradient-color-stops\r\n\r\nso I wrote this:\r\n\r\nresult:\r\n\r\nIt's right,now I use dynamic class:\r\n\r\nreuslt:\r\n\r\n\r\nIt can be seen from the console that the style is indeed written into the class,so what did I wrong?If you can see right style,please \r\nrestart the project,thanks.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3071,3072,3073],{"name":3055,"color":3056},{"name":3058,"color":3059},{"name":3074,"color":3075},"⛔️ can be closed","484893",19013,"Nuxt3 cannot use tailwindcss in dynamic class","2023-02-14T08:39:44Z","https://github.com/nuxt/nuxt/issues/19013",0.64795333,{"description":3082,"labels":3083,"number":3086,"owner":3029,"repository":3029,"state":3046,"title":3087,"updated_at":3088,"url":3089,"score":3090},"### 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_",[3084,3085],{"name":3055,"color":3056},{"name":3058,"color":3059},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.650281,{"labels":3092,"number":3093,"owner":3029,"repository":3029,"state":3046,"title":3094,"updated_at":3095,"url":3096,"score":3097},[],12025,"Error when attempting to use Tailwind CSS with Nuxt 3","2023-01-19T15:54:17Z","https://github.com/nuxt/nuxt/issues/12025",0.65575063,{"labels":3099,"number":3102,"owner":3029,"repository":3029,"state":3046,"title":3094,"updated_at":3103,"url":3104,"score":3105},[3100,3101],{"name":3055,"color":3056},{"name":3020,"color":3021},11937,"2023-01-19T16:08:26Z","https://github.com/nuxt/nuxt/issues/11937",0.65633583,{"labels":3107,"number":3110,"owner":3029,"repository":3029,"state":3046,"title":3111,"updated_at":3112,"url":3113,"score":3114},[3108,3109],{"name":3055,"color":3056},{"name":3058,"color":3059},13385,"Cannot use Tailwindcss classes from composables","2023-01-19T16:54:19Z","https://github.com/nuxt/nuxt/issues/13385",0.65682286,{"description":3116,"labels":3117,"number":3123,"owner":3029,"repository":3029,"state":3046,"title":3124,"updated_at":3125,"url":3126,"score":3127},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v20.13.1`\r\n- Nuxt Version: `3.12.4`\r\n- CLI Version: `3.12.0`\r\n- Nitro Version: `2.9.7`\r\n- Package Manager: `pnpm@9.6.0`\r\n- Builder: `-`\r\n- User Config: `css`, `vite`, `compatibilityDate`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\n\n### Reproduction\n\nhttps://github.com/benjamincanac/nuxt-tailwindcss4\n\n### Describe the bug\n\nI'm creating an issue here as I've tried with Vue/Vite without any issue, so it might be related to Nuxt.\r\n\r\nWhen `ssr` is enabled and running `nuxt build` + `node .output/server/index.mjs`, we can see the Tailwind CSS styles are missing.\n\n### Additional context\n\nTo make this work in dev mode, we need to set `vite` resolution to `5.2.4` for some reason.\n\n### Logs\n\n_No response_",[3118,3119,3122],{"name":3058,"color":3059},{"name":3120,"color":3121},"vite","3574D1",{"name":3061,"color":3062},28382,"Tailwind CSS `v4.0.0-alpha` styles missing on build with Vite plugin","2024-09-10T20:14:51Z","https://github.com/nuxt/nuxt/issues/28382",0.6683142,{"description":3129,"labels":3130,"number":3133,"owner":3029,"repository":3029,"state":3046,"title":3134,"updated_at":3135,"url":3136,"score":3137},"### Environment\n\n```\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.11.1\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.4\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools, modules, tailwindcss\r\n- Runtime Modules: @nuxtjs/tailwindcss@6.11.4\r\n- Build Modules: -\r\n------------------------------\r\n```\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-4um3z1-gdby4j\n\n### Describe the bug\n\nWhen an [arbitrary value Tailwind class with whitespace](https://tailwindcss.com/docs/adding-custom-styles#handling-whitespace) is used (e.g. `font-['Times_New_Roman']`), CSS HMR will throw an error on subsequent hard refreshes.\r\n\r\nI had originally reported this issue in https://github.com/nuxt-modules/tailwindcss/issues/815, but @ineshbose later discovered the HMR error occurs even with a manual Tailwind CSS setup (without the module), leading me to forward the issue here. Both of us also suspect this could be a Vite bug, but I have not been able to reproduce the issue in a plain Vite project (e.g. `npm create vue@latest`).\r\n\r\nError Repro:\r\n1. Open the reproduction project above.\r\n2. Edit `@/assets/custom.css` (e.g. change `color: aqua;` to `color: magenta;`), then save the file.\r\n3. Hard refresh the page, an error similar to what's below will be thrown.\r\n\r\n```\r\nERROR Internal server error: Parse error /home/projects/github-4um3z1/node_modules/tailwindcss/tailwind.css?direct:489:32 7:22:34 PM\r\n at parse$e (/home/projects/github-4um3z1/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:16225:355)\r\n at handleModuleSoftInvalidation (/home/projects/github-4um3z1/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:53757:27)\r\n at async getCachedTransformResult (/home/projects/github-4um3z1/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:53562:10)\r\n at async doTransform (/home/projects/github-4um3z1/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:53535:24)\r\n at async viteTransformMiddleware (/home/projects/github-4um3z1/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:63458:32)\r\n```\n\n### Additional context\n\nThere are some workarounds documented in https://github.com/nuxt-modules/tailwindcss/issues/815#issuecomment-2002459123 that might be helpful in deducing what's actually causing this issue.\n\n### Logs\n\n_No response_",[3131,3132],{"name":3058,"color":3059},{"name":3061,"color":3062},26454,"CSS HMR errors from Tailwind arbitrary value classes","2024-10-15T07:52:11Z","https://github.com/nuxt/nuxt/issues/26454",0.6686758,["Reactive",3139],{},["Set"],["ShallowReactive",3142],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f9fkuc-ggqZjbL86Libr8uX_nRmQ8dpIjA7swotSVKvY":-1},"/nuxt/ui/2099"]