\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```",[3018,3021,3024],{"name":3019,"color":3020},"bug","d73a4a",{"name":3022,"color":3023},"v3","49DCB8",{"name":3025,"color":3026},"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.62776935,{"description":3036,"labels":3037,"number":3041,"owner":3028,"repository":3029,"state":3042,"title":3043,"updated_at":3044,"url":3045,"score":3046},"### 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. ",[3038,3039,3040],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},4432,"closed","Fallback colors are not generated properly for tailwind utilities","2025-07-03T15:25:40Z","https://github.com/nuxt/ui/issues/4432",0.6145537,{"description":3048,"labels":3049,"number":3053,"owner":3028,"repository":3029,"state":3042,"title":3054,"updated_at":3055,"url":3056,"score":3057},"### 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```",[3050,3051,3052],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},3986,"tailwindcss neutral color missing","2025-05-02T09:58:19Z","https://github.com/nuxt/ui/issues/3986",0.6236439,{"description":3059,"labels":3060,"number":3064,"owner":3028,"repository":3028,"state":3042,"title":3065,"updated_at":3066,"url":3067,"score":3068},"### 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```",[3061],{"name":3062,"color":3063},"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.62557316,{"description":3070,"labels":3071,"number":3079,"owner":3028,"repository":3028,"state":3042,"title":3080,"updated_at":3081,"url":3082,"score":3083},"### 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_",[3072,3075,3076],{"name":3073,"color":3074},"3.x","29bc7f",{"name":3062,"color":3063},{"name":3077,"color":3078},"needs reproduction","FBCA04",27385,"Tailwindcss added at last is not applied","2024-05-30T05:43:05Z","https://github.com/nuxt/nuxt/issues/27385",0.644104,{"labels":3085,"number":3088,"owner":3028,"repository":3028,"state":3042,"title":3089,"updated_at":3090,"url":3091,"score":3092},[3086,3087],{"name":3073,"color":3074},{"name":3062,"color":3063},13475,"Tailwind module not working","2023-01-19T16:57:29Z","https://github.com/nuxt/nuxt/issues/13475",0.64815843,{"description":3094,"labels":3095,"number":3098,"owner":3028,"repository":3029,"state":3042,"title":3099,"updated_at":3100,"url":3101,"score":3102},"### 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```",[3096,3097],{"name":3019,"color":3020},{"name":3022,"color":3023},4339,"Issue using pnpm 10.12.1: Can't resolve 'tailwindcss'","2025-06-16T12:54:09Z","https://github.com/nuxt/ui/issues/4339",0.6497826,{"labels":3104,"number":3106,"owner":3028,"repository":3028,"state":3042,"title":3107,"updated_at":3108,"url":3109,"score":3110},[3105],{"name":3073,"color":3074},11875,"TailwindCSS only works on client-side","2023-01-19T15:48:25Z","https://github.com/nuxt/nuxt/issues/11875",0.65056473,{"description":3112,"labels":3113,"number":3116,"owner":3028,"repository":3028,"state":3042,"title":3117,"updated_at":3118,"url":3119,"score":3120},"### 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_",[3114,3115],{"name":3073,"color":3074},{"name":3062,"color":3063},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.65076965,{"description":3122,"labels":3123,"number":3131,"owner":3028,"repository":3028,"state":3042,"title":3132,"updated_at":3133,"url":3134,"score":3135},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v18.16.0`\r\n- Nuxt Version: `3.6.5`\r\n- Nitro Version: `2.5.2`\r\n- Package Manager: `pnpm@8.6.11`\r\n- Builder: `vite`\r\n- User Config: `extends`, `telemetry`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\r\n### Reproduction\r\n\r\n### Create component in our Nuxt layer\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cbutton :class=\"[$style.root]\">\r\n \u003Cspan :class=\"$style.title\">TEST\u003C/span>\u003Cslot />\r\n \u003C/button>\r\n\u003C/template>\r\n\r\n\u003Cstyle module>\r\n.root {\r\n display: flex;\r\n background-color: black;\r\n}\r\n.title {\r\n color: rgb(51, 48, 211);\r\n}\r\n\u003C/style>\r\n```\r\n```ts\r\nexport default defineNuxtConfig({\r\n extends: [\"our-same-layer\"],\r\n});\r\n```\r\n\u003Cimg width=\"1641\" alt=\"image\" src=\"https://github.com/nuxt/nuxt/assets/52721424/37b8fd5c-40bf-40a2-9178-c7dbb6a8c2dd\">\r\n\r\n### But if we run only layer, we get the correct result\r\n\u003Cimg width=\"1643\" alt=\"image\" src=\"https://github.com/nuxt/nuxt/assets/52721424/dbfb15e0-5180-43b1-8b07-76a86bb445f4\">\r\n\r\n\r\n\r\n### Describe the bug\r\n\r\nDuplicate stylesheet in dev when using Nuxt Layer..\r\n### Additional context\r\n\r\nI tested pure css, it's reproduced on css module and pure css\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cbutton class=\"root\">\r\n \u003Cspan class=\"title\">TEST\u003C/span>\u003Cslot />\r\n \u003C/button>\r\n\u003C/template>\r\n\r\n\u003Cstyle>\r\n.root {\r\n display: flex;\r\n background-color: black;\r\n}\r\n.title {\r\n color: rgb(51, 48, 211);\r\n}\r\n\u003C/style>\r\n```\r\n\u003Cimg width=\"1642\" alt=\"image\" src=\"https://github.com/nuxt/nuxt/assets/52721424/422ddc69-a372-4255-a7a0-b33fdf99c54a\">\r\n\r\n### Logs\r\n\r\n_No response_",[3124,3125,3126,3128],{"name":3073,"color":3074},{"name":3019,"color":3020},{"name":3127,"color":3078},"🔨 p3-minor",{"name":3129,"color":3130},"layers","006B75",22658,"Duplicate stylesheet in dev when using Nuxt Layer","2023-09-11T13:39:19Z","https://github.com/nuxt/nuxt/issues/22658",0.6532636,["Reactive",3137],{},["Set"],["ShallowReactive",3140],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fAg1k0W6XpK7LaeP7sqeosxkQZiq7uHpC5n5dy2NhRg8":-1},"/nuxt/ui/4049"]