\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```",[3040,3041,3042],{"name":3021,"color":3022},{"name":3024,"color":3025},{"name":3027,"color":3028},4503,"`@import \"@nuxt/ui\" layer(layer-name);` not working","2025-07-11T13:35:06Z","https://github.com/nuxt/ui/issues/4503",0.71039647,{"description":3049,"labels":3050,"number":3058,"owner":3030,"repository":3031,"state":3059,"title":3060,"updated_at":3061,"url":3062,"score":3063},"### 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_",[3051,3052,3053,3056],{"name":3021,"color":3022},{"name":3027,"color":3028},{"name":3054,"color":3055},"closed-by-bot","ededed",{"name":3057,"color":3055},"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.6457178,{"description":3065,"labels":3066,"number":3076,"owner":3030,"repository":3030,"state":3059,"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_",[3067,3070,3073],{"name":3068,"color":3069},"3.x","29bc7f",{"name":3071,"color":3072},"pending triage","E99695",{"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.69113743,{"description":3082,"labels":3083,"number":3086,"owner":3030,"repository":3030,"state":3059,"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":3068,"color":3069},{"name":3071,"color":3072},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.6918814,{"description":3092,"labels":3093,"number":3097,"owner":3030,"repository":3098,"state":3059,"title":3099,"updated_at":3100,"url":3101,"score":3102},"TailwindCSS `hidden` class not hiding `Icon`.\r\n\r\n```vue\r\n\u003CIcon name=\"mdi:chevron-down\" class=\"hidden\" />\r\n```\r\n\r\nhttps://github.com/nuxt-modules/icon/blob/0ae93b806f0633f9ee65599136655c0456ffed95/src/runtime/Icon.vue#L70-L73",[3094],{"name":3095,"color":3096},"question","d876e3",68,"icon","TailwindCSS `hidden` class not hiding `Icon`","2023-08-07T18:00:28Z","https://github.com/nuxt/icon/issues/68",0.6935071,{"description":3104,"labels":3105,"number":3110,"owner":3030,"repository":3031,"state":3059,"title":3111,"updated_at":3112,"url":3113,"score":3114},"### 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```",[3106,3107,3108,3109],{"name":3021,"color":3022},{"name":3027,"color":3028},{"name":3054,"color":3055},{"name":3057,"color":3055},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.69447124,{"description":3116,"labels":3117,"number":3125,"owner":3030,"repository":3030,"state":3059,"title":3126,"updated_at":3127,"url":3128,"score":3129},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v20.11.0\r\n- Nuxt Version: 3.10.1\r\n- CLI Version: 3.10.1\r\n- Nitro Version: -\r\n- Package Manager: pnpm@8.15.2\r\n- Builder: -\r\n- User Config: devtools, css\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nI haven't been able to reproduce it in Stackblitz, but the following steps should work:\r\n\r\n1. Create a new project\r\n ```bash\r\n $ pnpx nuxi@latest init fouc\r\n ```\r\n\r\n2. Create the following file `assets/css/main.css`:\r\n ```css\r\n body {\r\n background-color: greenyellow;\r\n }\r\n ```\r\n\r\n3. Change `app.vue`:\r\n\r\n ```vue\r\n \u003Ctemplate>\r\n \u003Cdiv>\r\n Hello world\r\n \u003C/div>\r\n \u003C/template>\r\n ```\r\n\r\n4. Add the file to `nuxt.config.ts`:\r\n\r\n ```typescript\r\n export default defineNuxtConfig({\r\n css: ['assets/css/main.css'],\r\n })\r\n ```\r\n\r\n5. Start the dev server and refresh the page multiple times:\r\n ```bash\r\n $ pnpm dev\r\n ```\r\n\r\nYou will notice that there's FOUC in the body styles. It is much more prominent when there are multiple styles applied, or a tool like Tailwindcss is used.\r\nIf you fix the Nuxt version to `3.10.1` with the following change in `package.json` it works correctly:\r\n\r\n```json\r\n\"resolutions\": {\r\n \"nuxt\": \"3.10.1\"\r\n}\r\n```\r\n\r\n### Describe the bug\r\n\r\nFOUC for global css styles passed to `nuxt.config.ts`.\r\n\r\n### Additional context\r\n\r\nI haven't been able to pinpoint the commit that causes this issue, but looking at the release notes of Nuxt 3.10.2 it might be related to the following PR:\r\n\r\n- Inline entry styles before component styles (https://github.com/nuxt/nuxt/pull/25749)\r\n\r\n### Logs\r\n\r\n_No response_",[3118,3119,3122],{"name":3068,"color":3069},{"name":3120,"color":3121},"vite","3574D1",{"name":3123,"color":3124},"upstream","E8A36D",25806,"FOUC after Nuxt 3.10.2 update","2024-02-22T07:52:56Z","https://github.com/nuxt/nuxt/issues/25806",0.69484425,{"labels":3131,"number":3134,"owner":3030,"repository":3030,"state":3059,"title":3135,"updated_at":3136,"url":3137,"score":3138},[3132,3133],{"name":3068,"color":3069},{"name":3071,"color":3072},13385,"Cannot use Tailwindcss classes from composables","2023-01-19T16:54:19Z","https://github.com/nuxt/nuxt/issues/13385",0.6964405,{"description":3140,"labels":3141,"number":3145,"owner":3030,"repository":3030,"state":3059,"title":3146,"updated_at":3147,"url":3148,"score":3149},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v16.14.2\r\n- Nuxt Version: 3.6.5\r\n- Nitro Version: 2.5.2\r\n- Package Manager: yarn@3.2.0\r\n- Builder: vite\r\n- User Config: alias, app, components, css, devtools, experimental, extends, i18n, modules, nitro, pinia, router, runtimeConfig, tailwindcss, telemetry, veeValidate, vite, vue\r\n- Runtime Modules: @pinia/nuxt@^0.4.11, @nuxtjs/stylelint-module@^5.1.0, @nuxtjs/i18n@8.0.0-beta.13, @vueuse/nuxt@10.2.1, @vee-validate/nuxt@^4.9.6, @nuxtjs/tailwindcss@^6.8.0\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\nI provide a minimal reproduction\r\n\r\nhttps://stackblitz.com/edit/github-brcyvh?file=pages%2Findex.vue\r\n\r\n### Describe the bug\r\n\r\nI'm using a plugin `$bp` that use `useBreakpoints` from `vueuse` under the hood https://vueuse.org/core/useBreakpoints\r\n\r\nMy goal is to change the `size` of the component `NButton` based on a boolean : `$bp.isLapM`.\r\n\r\nWhen we refresh the page, we see that the `btnSize` inside the button is updated but the class still `-sm`.\r\nIf I resize my window, both are updated\r\n\r\nWe are migrating our app to Nuxt 3, and on Nuxt 2 we didn't have this issue... :cry: \r\n\r\nI'm a doing something wrong about this ? \r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3142,3143,3144],{"name":3068,"color":3069},{"name":3071,"color":3072},{"name":3123,"color":3124},22722,"class / style attribute does not update on node mismatch","2023-08-23T10:38:59Z","https://github.com/nuxt/nuxt/issues/22722",0.69917625,["Reactive",3151],{},["Set"],["ShallowReactive",3154],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fkR52DP09JHrGQn6NF4qHh400M_hlT7L-N408pS8X9XU":-1},"/nuxt/ui/1998"]