\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```",[3039,3040,3041],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3026,"color":3027},4503,"`@import \"@nuxt/ui\" layer(layer-name);` not working","2025-07-11T13:35:06Z","https://github.com/nuxt/ui/issues/4503",0.709606,{"description":3048,"labels":3049,"number":3057,"owner":3029,"repository":3030,"state":3058,"title":3059,"updated_at":3060,"url":3061,"score":3062},"### For what version of Nuxt UI are you asking this question?\n\nv3.0.0-alpha.x\n\n### Description\n\nHi there 👋\n\nI'm wondering if there are any plans to support UnoCSS as an alternative to Tailwind CSS in Nuxt UI 3? \n\nCurrently Nuxt UI is tightly coupled with Tailwind CSS. Given that UnoCSS is gaining popularity in the Vue ecosystem and offers great performance benefits, it would be amazing to have UnoCSS as an option.",[3050,3053,3056],{"name":3051,"color":3052},"duplicate","cfd3d7",{"name":3054,"color":3055},"question","d876e3",{"name":3023,"color":3024},2660,"closed","Question: Any plans to support UnoCSS in Nuxt UI 3?","2024-11-16T13:24:37Z","https://github.com/nuxt/ui/issues/2660",0.66867,{"labels":3064,"number":3071,"owner":3029,"repository":3029,"state":3058,"title":3072,"updated_at":3073,"url":3074,"score":3075},[3065,3068],{"name":3066,"color":3067},"3.x","29bc7f",{"name":3069,"color":3070},"pending triage","E99695",13385,"Cannot use Tailwindcss classes from composables","2023-01-19T16:54:19Z","https://github.com/nuxt/nuxt/issues/13385",0.6909737,{"description":3077,"labels":3078,"number":3081,"owner":3029,"repository":3030,"state":3058,"title":3023,"updated_at":3082,"url":3083,"score":3084},"The development is ongoing on the default branch of this repository: https://github.com/nuxt/ui.\n\n---\n\nA lot has changed since `@nuxt/ui` was made open-source (May 2023), so the plan here is to rewrite every component from scratch alongside their config.\n\nI'll post regular updates on this issue and on https://twitter.com/benjamincanac.\n\n## Documentation\n\nhttps://ui3.nuxt.dev\n\n## Roadmap (Nov 20, 2024)\n\n- [x] Finish the migration to `reka-ui@alpha` on `@nuxt/ui` & `@nuxt/ui-pro` #2448\n- [x] Write the docs for implemented `@nuxt/ui-pro` components\n- [x] Finish `@nuxt/ui-pro` components\n- [x] Make Nuxt UI Pro v3 work with Vue like Nuxt UI https://github.com/nuxt/ui-pro/pull/742\n- [ ] Implement new components in `@nuxt/ui` like\n - [x] `Calendar` #2618\n - [ ] `InputDate` #2524\n - [x] `Tree` #3180\n - [x] `Stepper` #2733\n- [x] Migrate all the Nuxt UI Pro templates\n - [x] Starter\n - [x] Landing\n - [x] Docs\n - [x] SaaS https://github.com/nuxt-ui-pro/saas/pull/86\n - [x] Dashboard https://github.com/nuxt-ui-pro/dashboard/pull/86\n- [ ] Build the Nuxt UI docs marketing pages\n - [x] Landing\n - [x] Figma\n - [x] Pro -> Landing\n - [x] Pro -> Pricing\n - [x] Pro -> Templates\n - [x] Pro -> Activate\n - [ ] Releases\n- [x] Write migration guide https://ui3.nuxt.dev/getting-started/migration\n- [x] Release `@nuxt/ui` & `@nuxt/ui-pro` officially once `tailwindcss` and `reka-ui` are released\n- [x] Migrate all the Nuxt apps (nuxt.com, image.nuxt.com, eslint.nuxt.com, devtools.nuxt.com, fonts.nuxt.com, hub.nuxt.com, nuxt.studio, etc.)\n- [ ] Implement new `@nuxt/ui` & `@nuxt/ui-pro` components\n- [ ] Create new templates like Changelog, Portfolio, etc. \n\n## Breaking Changes\n\nThe biggest change is the switch to `tailwind-variants`, this will cause lots of breaking changes if you've used the `ui` prop or `app.config.ts` to override the config. I apologize in advance for this but I strongly believe this will be beneficial and will bring consistency across all components.\n\n> At the beginning the config was split in many keys for the same div to give more flexibility, but since then we introduced `tailwind-merge` which now allows us to group those keys together, this is a good opportunity to clean the whole thing. \n\nThe config will now have a `slots` amongst other keys that will specifically target dom nodes. The `ui` prop will only allow you to target those slots.\n\nThese changes alongside the refactor of all components will also improve the types, the `app.config.ts` and `ui` props are now perfectly typed, as well as all components `props`, `slots`, `emits` and `expose`.\n\n> Feel free to comment on this if you have any ideas for the next major.\n\n```[tasklist]\n### Components\n- [x] Accordion\n- [x] Alert\n- [x] Avatar\n- [x] AvatarGroup\n- [x] Badge\n- [x] Breadcrumb\n- [x] Button\n- [x] ButtonGroup\n- [x] Card\n- [x] Carousel\n- [x] Checkbox\n- [x] Chip\n- [x] Collapsible\n- [x] CommandPalette\n- [x] Container\n- [x] ContextMenu\n- [x] Drawer\n- [x] DropdownMenu (Dropdown)\n- [x] Form\n- [x] FormField (FormGroup)\n- [x] Icon\n- [x] Input\n- [x] InputMenu\n- [x] Kbd\n- [x] Link\n- [x] Modal\n- [x] NavigationMenu (HorizontalNavigation/VerticalNavigation)\n- [x] Pagination\n- [x] Popover\n- [x] Progress\n- [x] Provider\n- [x] RadioGroup\n- [x] Select\n- [x] SelectMenu\n- [x] Separator (Divider)\n- [x] Skeleton\n- [x] Slideover\n- [x] Slider (Range)\n- [x] Table\n- [x] Tabs\n- [x] Textarea\n- [x] Toast (Notification)\n- [x] Switch (Toggle)\n- [x] Tooltip\n```\n",[3079],{"name":3080,"color":3024},"release",1289,"2025-07-17T12:55:11Z","https://github.com/nuxt/ui/issues/1289",0.6916121,{"description":3086,"labels":3087,"number":3092,"owner":3029,"repository":3030,"state":3058,"title":3093,"updated_at":3094,"url":3095,"score":3096},"### Description\n\nHi, first of all thanks for Nuxt UI, it's a great library that makes building interfaces in Nuxt fast and enjoyable. Really appreciate the work you're putting into it.\n\n## Context\n\nThe `\u003CUTable>` component currently supports conditional class names via `meta.class.tr` (from `TableMeta`) and `meta.class.th` / `meta.class.td` (from `ColumnMeta`). This works well in most cases with Tailwind.\n\nHowever, it’s not possible today to apply inline styles dynamically — for example, to set background colors or custom widths based on data. This creates limitations in use cases where:\n\n- Tailwind classes are too generic or not granular enough \n- Style values are truly dynamic (e.g. coming from user data or configs) \n\n## Proposal\n\nAdd support for `meta.style`, mirroring the structure of `meta.class`, with the following API shape:\n\n```ts\nmeta {\n style?: {\n tr?: string | ((row: Row\u003CTData>) => string);\n };\n}\n\n\nmeta: {\n style?: {\n th?: string | ((cell: Header\u003CTData, TValue>) => string);\n td?: string | ((cell: Cell\u003CTData, TValue>) => string);\n }\n}\n```\n\n## Example usage\n\n```vue\n\u003CUTable\n :data=\"data\"\n :columns=\"columns\"\n :meta=\"{\n style: {\n tr: row => row.age \u003C 18 ? { backgroundColor: '#fff0f0' } : {},\n }\n }\"\n/>\n```\n\n## Why this matters\n\n- It improves flexibility for styling without requiring full slot overrides \n- It handles dynamic styles that can’t be expressed with Tailwind classes \n- It aligns with the existing `meta.class` design in both `TableMeta` and `ColumnMeta`, keeping things consistent and declarative\n\n### Additional context\n\n_No response_",[3088,3091],{"name":3089,"color":3090},"enhancement","a2eeef",{"name":3023,"color":3024},4475,"Support inline `style` in `\u003CUTable>` via `meta.style`","2025-07-14T08:56:29Z","https://github.com/nuxt/ui/issues/4475",0.70118827,{"description":3098,"labels":3099,"number":3102,"owner":3029,"repository":3029,"state":3058,"title":3103,"updated_at":3104,"url":3105,"score":3106},"### 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).",[3100,3101],{"name":3066,"color":3067},{"name":3069,"color":3070},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.70227635,{"description":3108,"labels":3109,"number":3117,"owner":3029,"repository":3030,"state":3058,"title":3118,"updated_at":3119,"url":3120,"score":3121},"### 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_",[3110,3111,3112,3115],{"name":3020,"color":3021},{"name":3026,"color":3027},{"name":3113,"color":3114},"closed-by-bot","ededed",{"name":3116,"color":3114},"stale",2099,"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.7033555,{"description":3123,"labels":3124,"number":3130,"owner":3029,"repository":3029,"state":3058,"title":3131,"updated_at":3132,"url":3133,"score":3134},"### 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_",[3125,3126,3127],{"name":3066,"color":3067},{"name":3069,"color":3070},{"name":3128,"color":3129},"⛔️ 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.7033606,{"labels":3136,"number":3142,"owner":3029,"repository":3029,"state":3058,"title":3143,"updated_at":3144,"url":3145,"score":3146},[3137,3138,3139],{"name":3116,"color":3027},{"name":3069,"color":3070},{"name":3140,"color":3141},"2.x","d4c5f9",9973,"Minor bug: CSS with pseudo class with params when staticly generated is different from development","2023-01-22T15:45:05Z","https://github.com/nuxt/nuxt/issues/9973",0.705644,["Reactive",3148],{},["Set"],["ShallowReactive",3151],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f2SN5FHSC93CxJ0UHKitiJaLnG0effn0IR7nVryOa5ys":-1},"/nuxt/ui/3011"]