\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.6866023,{"description":3037,"labels":3038,"number":3042,"owner":3029,"repository":3030,"state":3043,"title":3044,"updated_at":3045,"url":3046,"score":3047},"### 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```",[3039,3040,3041],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3026,"color":3027},3986,"closed","tailwindcss neutral color missing","2025-05-02T09:58:19Z","https://github.com/nuxt/ui/issues/3986",0.6269428,{"description":3049,"labels":3050,"number":3059,"owner":3029,"repository":3030,"state":3043,"title":3060,"updated_at":3061,"url":3062,"score":3063},"### Description\n\n**nuxt ui** incorrectly assumes tailwind colours are literal values and passes through `\u003Calpha-value>` when generating its `--color-primary-N` variables.\nit also forces particular shades (400 and 500) as `DEFAULT`, how can I disable this _feature_?\n\n```html\n \u003Cstyle id=\"nuxt-ui-colors\">\n :root {\n --color-primary-50: rgb(var(--md-primary-50) / \u003Calpha-value>);\n --color-primary-100: rgb(var(--md-primary-100) / \u003Calpha-value>);\n --color-primary-200: rgb(var(--md-primary-200) / \u003Calpha-value>);\n --color-primary-300: rgb(var(--md-primary-300) / \u003Calpha-value>);\n --color-primary-400: rgb(var(--md-primary-400) / \u003Calpha-value>);\n --color-primary-500: rgb(var(--md-primary-500) / \u003Calpha-value>);\n --color-primary-600: rgb(var(--md-primary-600) / \u003Calpha-value>);\n --color-primary-700: rgb(var(--md-primary-700) / \u003Calpha-value>);\n --color-primary-800: rgb(var(--md-primary-800) / \u003Calpha-value>);\n --color-primary-900: rgb(var(--md-primary-900) / \u003Calpha-value>);\n --color-primary-950: rgb(var(--md-primary-950) / \u003Calpha-value>);\n --color-primary-DEFAULT: rgb(var(--md-primary) / \u003Calpha-value>);\n --color-primary-DEFAULT: var(--color-primary-500);\n --color-gray-50: rgb(var(--md-neutral-50) / \u003Calpha-value>);\n --color-gray-100: rgb(var(--md-neutral-100) / \u003Calpha-value>);\n --color-gray-200: rgb(var(--md-neutral-200) / \u003Calpha-value>);\n --color-gray-300: rgb(var(--md-neutral-300) / \u003Calpha-value>);\n --color-gray-400: rgb(var(--md-neutral-400) / \u003Calpha-value>);\n --color-gray-500: rgb(var(--md-neutral-500) / \u003Calpha-value>);\n --color-gray-600: rgb(var(--md-neutral-600) / \u003Calpha-value>);\n --color-gray-700: rgb(var(--md-neutral-700) / \u003Calpha-value>);\n --color-gray-800: rgb(var(--md-neutral-800) / \u003Calpha-value>);\n --color-gray-900: rgb(var(--md-neutral-900) / \u003Calpha-value>);\n --color-gray-950: rgb(var(--md-neutral-950) / \u003Calpha-value>);\n --color-gray-DEFAULT: rgb(var(--md-neutral) / \u003Calpha-value>);\n }\n\n .dark {\n --color-primary-DEFAULT: var(--color-primary-400);\n }\n \u003C/style>\n \u003Cstyle id=\"nuxt-ui-variables\">\n :root {\n --header-height: 4rem;\n --ui-background: var(--md-surface);\n --ui-foreground: var(--md-on-surface);\n }\n\n .dark {\n --ui-background: var(--md-surface);\n --ui-foreground: var(--md-on-surface);\n }\n \u003C/style>\n```",[3051,3054,3057],{"name":3052,"color":3053},"question","d876e3",{"name":3055,"color":3056},"closed-by-bot","ededed",{"name":3058,"color":3056},"stale",3025,"`--color-primary-N` vs tailwind colors via variables","2025-06-18T09:02:42Z","https://github.com/nuxt/ui/issues/3025",0.6344487,{"description":3065,"labels":3066,"number":3071,"owner":3029,"repository":3030,"state":3043,"title":3072,"updated_at":3073,"url":3074,"score":3075},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.9.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.8.3\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.19.2, nuxt-svgo@4.0.9, @pinia/nuxt@0.9.0, pinia-plugin-persistedstate/nuxt, @nuxtjs/i18n@9.1.0, nuxt-jsonld@2.1.0, @nuxtjs/robots@5.0.0, nuxt-gtag@3.0.2, @sentry/nuxt/module@8.42.0, nuxt-time@1.0.3, @nuxt/eslint@0.7.2\n- Build Modules: -\n\n\n### Version\n\nv2.19.2\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-ncxoznzw\n\n### Description\n\nIf you define your own color for tailwinds, and attempt to use it on a UButton component with the link variant, it will not work and give the following error:\n\n```\n500\nvariant?.replaceAll is not a function\n\nat ComputedRefImpl.fn (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@nuxt+ui@2.19.2_vite@6.0.3_vue@3.5.13/node_modules/@nuxt/ui/dist/runtime/components/elements/Button.js:142:18)\nat refreshComputed (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:353:29)\nat get value (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:1558:5)\nat unref (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:1431:29)\nat Object.get (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:1437:64)\nat Object.get (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:3099:26)\nat Proxy._sfc_render (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@nuxt+ui@2.19.2_vite@6.0.3_vue@3.5.13/node_modules/@nuxt/ui/dist/runtime/components/elements/Button.js:199:17)\nat renderComponentRoot (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:6521:16)\nat hydrateSubTree (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:5309:32)\nat ReactiveEffect.componentUpdateFn [as fn] (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:5334:13)\n```\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3067,3068,3069,3070],{"name":3020,"color":3021},{"name":3026,"color":3027},{"name":3055,"color":3056},{"name":3058,"color":3056},2860,"[UButton] Using a custom color on the link variant causes an error","2025-06-18T09:05:19Z","https://github.com/nuxt/ui/issues/2860",0.65499157,{"description":3077,"labels":3078,"number":3082,"owner":3029,"repository":3030,"state":3043,"title":3083,"updated_at":3084,"url":3085,"score":3086},"### 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. ",[3079,3080,3081],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3026,"color":3027},4432,"Fallback colors are not generated properly for tailwind utilities","2025-07-03T15:25:40Z","https://github.com/nuxt/ui/issues/4432",0.66161793,{"labels":3088,"number":3089,"owner":3029,"repository":3029,"state":3043,"title":3090,"updated_at":3091,"url":3092,"score":3093},[],12025,"Error when attempting to use Tailwind CSS with Nuxt 3","2023-01-19T15:54:17Z","https://github.com/nuxt/nuxt/issues/12025",0.6768107,{"description":3095,"labels":3096,"number":3099,"owner":3029,"repository":3030,"state":3043,"title":3100,"updated_at":3101,"url":3102,"score":3103},"### 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```",[3097,3098],{"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.6775611,{"labels":3105,"number":3110,"owner":3029,"repository":3029,"state":3043,"title":3090,"updated_at":3111,"url":3112,"score":3113},[3106,3109],{"name":3107,"color":3108},"3.x","29bc7f",{"name":3020,"color":3021},11937,"2023-01-19T16:08:26Z","https://github.com/nuxt/nuxt/issues/11937",0.67945266,{"description":3115,"labels":3116,"number":3121,"owner":3029,"repository":3029,"state":3043,"title":3122,"updated_at":3123,"url":3124,"score":3125},"### Describe the feature\r\n\r\nI wanted to add tailwind module so I ran `nuxi module add tailwind` and it added tailwind package instead of @nuxtjs/tailwindcss but we all know that I actually wanted to add the Tailwind Nuxt module. It would be very convenient if Nuxt was a bit smarter about this and understand what I actually meant.\r\n\r\nAs you can see what Nuxt actually added is completely wrong. Perhaps we could add some aliases to modules so nuxi could install the correct one? That would be very convenient. I have seen other projects do this and it is amazing DX.\r\n\r\nFor example, Symfony projects does this: https://github.com/symfony/recipes#aliases-option\r\n\r\nIt added `tailwind` instead of `@nuxtjs/tailwindcss`\r\n\r\n```diff\r\n \"devDependencies\": {\r\n \"@vueuse/nuxt\": \"^10.9.0\",\r\n+ \"tailwind\": \"^4.0.0\"\r\n }\r\n```\r\n\r\nand\r\n\r\n```diff\r\nexport default defineNuxtConfig({\r\n+ modules: [\"tailwind\"]\r\n})\r\n```\r\n\r\n### Additional information\r\n\r\n- [ ] Would you be willing to help implement this feature?\r\n- [ ] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3117,3118],{"name":3107,"color":3108},{"name":3119,"color":3120},"pending triage","E99695",26277,"Add module aliases so that running nuxi module add tailwind would actually install @nuxtjs/tailwindcss","2024-03-15T20:10:20Z","https://github.com/nuxt/nuxt/issues/26277",0.683676,{"description":3127,"labels":3128,"number":3136,"owner":3029,"repository":3029,"state":3043,"title":3137,"updated_at":3138,"url":3139,"score":3140},"### Environment\n\n------------------------------\r\n- Operating System: `Darwin`\r\n- Node Version: `v16.16.0`\r\n- Nuxt Version: `3.2.0`\r\n- Nitro Version: `2.2.1`\r\n- Package Manager: `yarn@1.22.19`\r\n- Builder: `vite`\r\n- User Config: `app`, `typescript`, `runtimeConfig`, `modules`, `colorMode`, `tailwindcss`\r\n- Runtime Modules: `@nuxtjs/color-mode@3.2.0`, `nuxt-icon@0.1.8`, `@nuxtjs/tailwindcss@6.1.3`, `@pinia/nuxt@0.4.6`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\n1. `yarn upgrade nuxt --latest`\r\n2. `yarn dev`\r\n```\r\n ERROR Cannot start nuxt: Cannot find module 'postcss-custom-properties'\r\n```\r\n3. Open `nuxt.config.ts` will see this on the `colorMode` property.\r\n```\r\nArgument of type '{ app: { head: { link: { rel: \"icon\"; type: \"image/svg+xml\"; href: string; }[]; }; }; typescript: { shim: false; strict: true; }; runtimeConfig: { apiSecret: string; public: { apiBase: string; }; }; modules: (string | [...])[]; colorMode: { ...; }; tailwindcss: { ...; }; }' is not assignable to parameter of type 'NuxtConfig'.\r\n Object literal may only specify known properties, and 'colorMode' does not exist in type 'NuxtConfig'.\r\n```\n\n### Describe the bug\n\nAfter upgrading nuxt `3.0.0` to `3.2.0`, will see the problems.\r\n\r\n1. `colorMode` module option in nuxt `3.0.0` shows the type as\r\n```\r\n(property) NuxtConfig['colorMode']?: Partial\u003CModuleOptions> | undefined\r\n```\r\nbut shows error in nuxt `3.2.0`.\r\n\r\n2. We need to install `postcss-custom-properties` in nuxt `3.2.0`, didn't need it in nuxt `3.0.0`.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3129,3130,3133],{"name":3107,"color":3108},{"name":3131,"color":3132},"upstream","E8A36D",{"name":3134,"color":3135},"needs reproduction","FBCA04",18933,"After upgrading Nuxt 3.0.0 to 3.2.0 problem","2024-01-09T06:07:13Z","https://github.com/nuxt/nuxt/issues/18933",0.68979466,["Reactive",3142],{},["Set"],["ShallowReactive",3145],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fx2uPNNR-UWqgGbgjloGqfT5Fuqo7bJVaS9lJYonF-vU":-1},"/nuxt/ui/4144"]