\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.6587666,{"description":3037,"labels":3038,"number":3042,"owner":3029,"repository":3030,"state":3043,"title":3044,"updated_at":3045,"url":3046,"score":3047},"### 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. ",[3039,3040,3041],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3026,"color":3027},4432,"closed","Fallback colors are not generated properly for tailwind utilities","2025-07-03T15:25:40Z","https://github.com/nuxt/ui/issues/4432",0.6080242,{"description":3049,"labels":3050,"number":3053,"owner":3029,"repository":3030,"state":3043,"title":3054,"updated_at":3055,"url":3056,"score":3057},"### 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```",[3051,3052],{"name":3020,"color":3021},{"name":3026,"color":3027},4617,"Can't resolve 'tailwindcss'","2025-07-28T11:08:23Z","https://github.com/nuxt/ui/issues/4617",0.616548,{"description":3059,"labels":3060,"number":3063,"owner":3029,"repository":3030,"state":3043,"title":3064,"updated_at":3065,"url":3066,"score":3067},"### 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```",[3061,3062],{"name":3020,"color":3021},{"name":3023,"color":3024},4049,"Tailwind colors not working in Nuxt Layers","2025-05-19T10:29:55Z","https://github.com/nuxt/ui/issues/4049",0.62044865,{"description":3069,"labels":3070,"number":3075,"owner":3029,"repository":3030,"state":3043,"title":3076,"updated_at":3077,"url":3078,"score":3079},"### Description\n\nI recently discovered that my custom color palettes were not being used by NuxtUi.\n\nI know there is an issue with `neutral` naming https://github.com/nuxt/ui/issues/3986 but I tried with different variable name (like slate for testing purpose) but everytime NuxtUi use the default Tailwind colors and not my overrided palette.\n\nI don't know if it's a bug or a configuration issue.\n\n```css\n@import 'tailwindcss';\n@import '@nuxt/ui';\n\n@theme {\n --color-neutral-50: #f6f6f6;\n --color-neutral-100: #e7e7e7;\n --color-neutral-200: #d1d1d1;\n --color-neutral-300: #b0b0b0;\n --color-neutral-400: #888888;\n --color-neutral-500: #6d6d6d;\n --color-neutral-600: #5d5d5d;\n --color-neutral-700: #4f4f4f;\n --color-neutral-800: #454545;\n --color-neutral-900: #3d3d3d;\n --color-neutral-950: #121212;\n}\n```\n```ts\nexport default defineAppConfig({\n ui: {\n colors: {\n // DEFAULT\n primary: 'emerald', // default: green\n secondary: 'blue',\n success: 'green',\n info: 'blue',\n warning: 'yellow',\n error: 'red',\n neutral: 'neutral', // default: slate\n // CUSTOM\n alert: 'amber',\n },\n },\n});\n```\n\nNuxi info output :\n```\n- Operating System: Linux\n- Node Version: v22.14.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.11\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: devtools, typescript, css, compatibilityDate, devServer, vite, runtimeConfig, app, ui, scripts, modules, sentry, sourcemap\n- Runtime Modules: @nuxt/ui@3.0.1, @pinia/nuxt@0.11.0, pinia-plugin-persistedstate/nuxt@4.3.0, @sentry/nuxt/module@9.18.0, @nuxt/scripts@0.11.6, @nuxt/eslint@1.3.1\n- Build Modules: -\n```",[3071,3074],{"name":3072,"color":3073},"question","d876e3",{"name":3023,"color":3024},4144,"How to use overrided tailwind colors","2025-05-13T14:46:54Z","https://github.com/nuxt/ui/issues/4144",0.63365823,{"description":3081,"labels":3082,"number":3085,"owner":3029,"repository":3030,"state":3043,"title":3086,"updated_at":3087,"url":3088,"score":3089},"### 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```",[3083,3084],{"name":3020,"color":3021},{"name":3023,"color":3024},4339,"Issue using pnpm 10.12.1: Can't resolve 'tailwindcss'","2025-06-16T12:54:09Z","https://github.com/nuxt/ui/issues/4339",0.63626844,{"description":3091,"labels":3092,"number":3102,"owner":3029,"repository":3029,"state":3043,"title":3103,"updated_at":3104,"url":3105,"score":3106},"### 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_",[3093,3096,3099],{"name":3094,"color":3095},"pending triage","E99695",{"name":3097,"color":3098},"vite","3574D1",{"name":3100,"color":3101},"upstream","E8A36D",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.6399836,{"description":3108,"labels":3109,"number":3114,"owner":3029,"repository":3029,"state":3043,"title":3115,"updated_at":3116,"url":3117,"score":3118},"### Environment\n\n```\n- Operating System: Linux\n- Node Version: v22.12.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.17.1\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.15.1\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/content@3.0.0-alpha.8, @nuxt/eslint@0.7.4, @nuxt/ui@3.0.0-alpha.10\n- Build Modules: -\n```\n\n### Reproduction\n\nTried to make a repro on stackblitz:\n```\ne/projects/github-9jngg6tm/node_modules/@tailwindcss/oxide-linux-x64-musl/tailwindcss-oxide.linux-x64-musl.node\n\nnpm ERR! code 1\nnpm ERR! path /home/projects/github-9jngg6tm\nnpm ERR! command failed\nnpm ERR! command sh -c nuxt prepare\n\nnpm ERR! A complete log of this run can be found in: /home/.npm/_logs/2024-12-23T16_24_38_034Z-debug-0.log\n```\n\nTried on Codesandbox: \"couldn't start MicroVM\"\n\n### Describe the bug\n\nTailwind in general is working fine for layout classes. However if I use a class like `drop-shadow-lg` it does not have an impact as it seems some variables are undefined.\n\n\u003Cimg width=\"328\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/1678ab42-b682-416b-9606-2d8605c837a1\" />\n\nPerhaps related, I'm seeing these warnings when building:\n\n```\n[vite:css] Lexical error on line 1: Unrecognized text. 4:12:25 PM\n\n Erroneous area:\n1: infinity * 1px\n^..^\n945| }\n946| .rounded-full {\n947| border-radius: calc(infinity * 1px);\n | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n948| }\n949| .rounded-s { (x2)\n\nℹ ✓ 227 modules transformed. 4:12:26 PM\n[plugin @tailwindcss/vite:generate:build] Sourcemap is likely to be incorrect: a plugin (@tailwindcss/vite:generate:build) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help\n```\n\nIn `nuxt.config.ts` I have this:\n`css: [\"~/assets/css/main.css\"]`\n\nIn `main.css` I have this:\n\n```\n@import \"tailwindcss\";\n@import \"@nuxt/ui\";\n```\n\n### Additional context\n\nI'm new to vue/nuxt/tailwind so it's entirely possible I'm doing something wrong.\n\n### Logs\n\n```shell-script\n\n```",[3110,3111],{"name":3094,"color":3095},{"name":3112,"color":3113},"needs reproduction","FBCA04",30345,"undefined tailwind variables, css sourcemap warnings","2024-12-23T18:18:48Z","https://github.com/nuxt/nuxt/issues/30345",0.6427242,{"description":3120,"labels":3121,"number":3127,"owner":3029,"repository":3029,"state":3043,"title":3128,"updated_at":3129,"url":3130,"score":3131},"### 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_",[3122,3125,3126],{"name":3123,"color":3124},"3.x","29bc7f",{"name":3094,"color":3095},{"name":3112,"color":3113},27385,"Tailwindcss added at last is not applied","2024-05-30T05:43:05Z","https://github.com/nuxt/nuxt/issues/27385",0.64601016,{"labels":3133,"number":3136,"owner":3029,"repository":3029,"state":3043,"title":3137,"updated_at":3138,"url":3139,"score":3140},[3134,3135],{"name":3123,"color":3124},{"name":3094,"color":3095},13475,"Tailwind module not working","2023-01-19T16:57:29Z","https://github.com/nuxt/nuxt/issues/13475",0.64648616,["Reactive",3142],{},["Set"],["ShallowReactive",3145],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fJtphFHDAhbMUDnZmng3MdjZpaLLjzQyCgCCXPiQxS1c":-1},"/nuxt/ui/3986"]