\n```\n\n### Will results something like this\n```html\n\u003Cdiv class=\"... root-test base-test\">\n ...\n \u003Cinput class=\"...\" />\n\u003C/div>\n```\n\n### Description\n\nWhen applying themes in `app.config.ts`, both **UInputTags** and **UInputMenu (multiple)** share the same weird behaviour compared with other components, where the class applied to `base` part of the component are applied to `root` part of the component.\n\n### Expected Behaviour\nThe applied class on `base` should be applied to the `\u003Cinput />`, not the `root` part of the component which is the outer `\u003Cdiv />` just like other input components such as **UInput**, **UInputNumber**, or **UTextarea**.\n\nCorrect me if I'm wrong if this are intended, thank you!\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3018,3021,3024],{"name":3019,"color":3020},"bug","d73a4a",{"name":3022,"color":3023},"v3","49DCB8",{"name":3025,"color":3026},"triage","ffffff",4530,"nuxt","ui","open","[UInputTags, UInputMenu] Theming behaviour issues","2025-07-15T17:50:02Z","https://github.com/nuxt/ui/issues/4530",0.69944125,{"description":3036,"labels":3037,"number":3038,"owner":3028,"repository":3039,"state":3030,"title":3040,"updated_at":3041,"url":3042,"score":3043},"Hello - I have the following in `nuxt.config.ts`\n\n```\nfonts: {\n families: [\n {\n name: 'My Font',\n provider: 'local',\n weights: ['200', '300', '400', '500', '600', '700', '800', '900'],\n display: 'optional',\n },\n ],\n }\n```\n\nWhen I inspect the @font-face created in the style section of my document, I can see `font-display: swap`. I'm on version `0.11.3`.",[],634,"fonts","font-display in nuxt.config.ts not respected","2025-05-21T21:17:21Z","https://github.com/nuxt/fonts/issues/634",0.7086757,{"description":3045,"labels":3046,"number":3050,"owner":3028,"repository":3029,"state":3030,"title":3051,"updated_at":3052,"url":3053,"score":3054},"### Environment\n\n```\n Operating System: Linux\n Node Version: v18.19.1\n Nuxt Version: 3.16.0\n CLI Version: 3.23.0\n Nitro Version: 2.11.6\n Package Manager: npm@10.2.4\n Builder: -\n User Config: compatibilityDate, devtools, colorMode, modules, css, i18n, runtimeConfig\n Runtime Modules: @nuxt/eslint@1.2.0, @nuxt/ui@3.1.3, @nuxt/test-utils@3.17.2, @nuxt/icon@1.13.0, @nuxtjs/i18n@9.3.1 @pinia/nuxt@0.10.1, @nuxt/image@1.10.0\n Build Modules: -\n```\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.16.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/goofy-yalow-xftq2n\n\n### Description\n\nI've set value of `--ui-text-dimmed` to red. If I use `text-dimmed` on paragraph its text color is red. However input's placeholder color is not affected (even though it has placeholder:text-dimmed class by default)\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3047,3048,3049],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},4301,"Input's placeholder doesn't respect value of `--ui-text-dimmed`","2025-06-06T09:22:24Z","https://github.com/nuxt/ui/issues/4301",0.7163176,{"description":3056,"labels":3057,"number":3067,"owner":3028,"repository":3028,"state":3068,"title":3069,"updated_at":3070,"url":3071,"score":3072},"### Environment\r\n\r\n- Operating System: Linux\r\n- Node Version: v18.17.0\r\n- Nuxt Version: 3.10.0\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@9.6.7\r\n- Builder: -\r\n- User Config: devtools, postcss, css\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\nCheck out this commit, run `npm run dev` and add pairs:\r\n\r\nhttps://github.com/mktcode/trading-assistant/commit/0ef592d39133d7af8030331b894a95727af117d9\r\n\r\nThe second pair has wrong classes. It's missing the classes of the wrapper div and the button is blue instead of red.\r\nIf you remove the PairSelect component or wrap it in another element, it fixes the display issue. So it has something to do with it. But what?\r\n\r\n### Describe the bug\r\n\r\n\r\n\r\nFor some reason classes aren't applied correctly in this v-for loop of a custom component. If it was the first or last element I could think of a reason but the second element just weirdly not having the classes.... I'm a bit puzzled. Maybe it's because it's monday but maybe it's because of Nuxt doing something weird? Idk. Maybe it's not even nuxt but Vue itself.\r\n\r\n\r\n\r\nIt's always the second div that takes the classes of the select component.\r\n\r\nIt is because the v-for is not wrapped in it's own parent element but I think I never had such a weird issue with that.",[3058,3061,3064],{"name":3059,"color":3060},"3.x","29bc7f",{"name":3062,"color":3063},"pending triage","E99695",{"name":3065,"color":3066},"upstream","E8A36D",25626,"closed","Tailwind classes missing in v-for loop.","2024-02-05T11:55:12Z","https://github.com/nuxt/nuxt/issues/25626",0.68239516,{"labels":3074,"number":3080,"owner":3028,"repository":3028,"state":3068,"title":3081,"updated_at":3082,"url":3083,"score":3084},[3075,3076,3077],{"name":3059,"color":3060},{"name":3062,"color":3063},{"name":3078,"color":3079},"needs reproduction","FBCA04",14065,"CSS not minified when using Font Awesome Icons","2023-09-12T09:54:44Z","https://github.com/nuxt/nuxt/issues/14065",0.7008162,{"labels":3086,"number":3093,"owner":3028,"repository":3028,"state":3068,"title":3094,"updated_at":3095,"url":3096,"score":3097},[3087,3089,3090],{"name":3088,"color":3026},"stale",{"name":3062,"color":3063},{"name":3091,"color":3092},"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.7009688,{"description":3099,"labels":3100,"number":3102,"owner":3028,"repository":3028,"state":3068,"title":3103,"updated_at":3104,"url":3105,"score":3106},"Hello I am trying to convert my existing Vuejs app into nuxt.js.\r\n\r\nI am using buidcons and those are working in vuejs but with nuxtjs I am getting this error\r\n\r\n[Vue warn]: Unknown custom element: \u003Cbi> - did you register the component correctly? For recursive components, make sure to provide the \"name\" option.\r\n\r\nHere is my code\r\n\r\n```\r\n\u003Cnuxt-link to=\"/newuser\" @click=\"leftmenu\" class=\"head\">\r\n \u003Cbi class=\"budicon-cloud-download\"> \u003C/bi>\r\n\u003C/nuxt-link>\r\n```\r\nThis is my buidcons.css file\r\n\r\n```\r\n@font-face {\r\n font-family: 'budicon-classic';\r\n src: url('/static/fonts/Budicons/budicon-classic.eot?jdete2');\r\n src: url('/static/fonts/Budicons/budicon-classic.eot?jdete2#iefix') format('embedded-opentype'),\r\n url('/static/fonts/Budicons/budicon-classic.ttf?jdete2') format('truetype'),\r\n url('/static/fonts/Budicons/budicon-classic.woff?jdete2') format('woff'),\r\n url('/static/fonts/Budicons/budicon-classic.svg?jdete2#budicon-classic') format('svg');\r\n font-weight: normal;\r\n font-style: normal;\r\n}\r\n\r\nbi {\r\n font-family: 'budicon-classic' !important;\r\n font-style: normal;\r\n font-weight: 400;\r\n font-variant: normal;\r\n text-transform: none;\r\n margin-right: 4px;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n}\r\n```\r\n\r\nWould you please help me how I can solve this\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2504\">#c2504\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3101],{"name":3091,"color":3092},2877,"Unknown custom element","2023-01-18T16:09:43Z","https://github.com/nuxt/nuxt/issues/2877",0.7011398,{"description":3108,"labels":3109,"number":3113,"owner":3028,"repository":3029,"state":3068,"title":3114,"updated_at":3115,"url":3116,"score":3117},"Related #196 \n\n| Alias | Name | Version |\n| ----- | ------------------------------------------- | --------------- |\n| ui | [nuxt/ui][nuxt-ui-href] | v3.0.0-alpha.10 |\n| tw | [tailwindcss][tailwindcss-href] | v4.0.0-beta.8 |\n| tv | [tailwind-variants][tailwind-variants-href] | v0.3.0 |\n| tm | [tailwind-merge][tailwind-merge-href] | v2.6.0 |\n| uno | [unocss][unocss-href] | v0.65.3 |\n\n**ui internally uses tv to flexibly generate component class names. tv internally uses tm to merge classes with the same effect (e.g., `p-2 p-4` --> `p-4`), and finally uses tw to recognize class names and generate style classes.**\n\n**After examining tv and tm, it became apparent that they don't strongly depend on tw, which opens up the possibility of replacing the final style generation step with uno.**\n\n\u003Cdetails>\n\u003Csummary>## tw Prefix Attempt (Optional)\u003C/summary>\n\nInitially, the idea was to limit tw to ui internals and uno for user usage. With tw's [prefix][tw-prefix-href] feature, the class rules became simpler. **However, ui internally (v3.0.0-alpha.10) doesn't yet support passing tw prefix configuration**, so let's first make ui support tw prefixes.\n\n### Understanding tv Variants\n\nTo add prefixes, we need to analyze the data structure that tv accepts.\n\n#### Regular Variants\n\n```ts\n import { tv } from 'tailwind-variants';\n\n tv({\n variants: {\n foo: {\n foo_val: 'px-2', // or ['pxx-2', ...], be the same, class / className\n },\n }\n })({ foo: 'foo_val' })\n```\n\n#### Boolean Variants (Including true/false keys)\n\n```ts\n tv({\n variants: {\n foo: {\n true: 'px-2',\n false: 'py-2',\n }\n }\n })({ foo: true, })\n```\n\n#### Compound Variants (Intersection between variants)\n\n```ts\n tv({\n variants: {\n foo: {\n foo_val: 'px-2',\n foo_val2: 'px-2',\n },\n bar: {\n true: 'px-2',\n false: 'py-2',\n },\n },\n compoundVariants: [\n {\n foo: 'foo_val', // or ['foo_val', 'foo_val2', ]\n bar: true,\n class: 'text-white', // You can also use \"className\" as the key\n }\n ],\n })({ foo: true, })\n```\n\n#### Responsive Variants (Device screen sizes)\n\n```ts\n tv({\n variants: {\n foo: {\n foo_val: 'px-2',\n foo_val2: 'px-4',\n },\n }\n },\n {\n responsiveVariants: ['sm', 'md'] // or `true` for all\n })({ \n foo: {\n initial: 'foo_val',\n sm: 'foo_val',\n md: 'foo_val2',\n }\n })\n```\n\n#### Slot Variants (Combining above variants with slots)\n\n```ts\n tv({\n slots: {\n slot_a: 'mx-2',\n slot_b: 'mx-2',\n },\n compoundSlots: [\n {\n slots: ['slot_a', 'slot_b', ], \n class: '',\n foo: 'foo_val', // for all slot while variant is missing\n },\n ],\n variants: {\n foo: {\n foo_val: {\n slot_a: 'px-2',\n }\n },\n bar: {\n true: {\n slot_a: 'mx-2'\n },\n false: {\n slot_a: 'mx-0'\n },\n },\n },\n compoundVariants: [\n {\n foo: 'foo_val',\n bar: true,\n class: {\n slot_a: '',\n }\n }\n ],\n {\n responsiveVariants: ['sm', 'md'] // or `true` for all\n }\n })({ \n foo: {\n initial: 'foo_val',\n sm: 'foo_val',\n md: 'foo_val2',\n }\n }) // --> { foo_slot, bar_slot, }\n```\n\n### Summary\n\nAfter adding prefix functionality locally (#3009 ) and configuring tw prefix (while installing uno to handle non-prefix classes in the playground for page styling), **practical usage revealed some unavoidable conflicts, such as at-rule usage. Additionally, this approach doesn't effectively prevent files from being processed twice (by both tw & uno)**. Therefore, let's try a different approach: remove tw completely and use UnoCSS for everything!\n\n\u003C/details>\n\n## Modifying ui\n\n### Disabling tw Plugin\n\nRemove `@tailwindcss/vite` installation handling from ui internals.\nRemove tw imports and specific configurations from ui playground.\n\n### Introducing uno\n\nFor [nuxt](https://unocss.dev/integrations/nuxt) | [vite](https://unocss.dev/integrations/vite)\n\nAlso, [Style Reset](https://unocss.dev/guide/style-reset) can be applied as needed.\n\n**IMPORTANT: Include @nuxt/ui files**\n\n```ts\nexport default defineConfig({\n presets: [\n presetUno(),\n ],\n content: {\n pipeline: {\n include: [\n // the default\n /\\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\\?)/,\n // IMPORTANT include @nuxt/ui files\n /\\.nuxt\\/ui\\//,\n ]\n }\n }\n})\n```\n\n## Primitive Variables\n\nuno doesn't generate primitive variables like tw does (e.g., `--color-green-500`, `--text-lg`, `--radius-md`, etc.), but ui internally needs these variables.\n\n**For now, we'll directly copy the primitive variables from tw's normal loaded to local.**\n\n## Rule Inconsistencies\n\n**There are must more undiscovered issues**\n\n### Ring\n\nIn uno, the default `ring` width is 3px, different from tw's 1px.\n\n**Solution:**\n\n```ts\n shortcuts: {\n ring: 'ring-1'\n },\n```\n\n### Color Opacity\n\ntw internally uses [color-mix](https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value/color-mix), allowing direct opacity settings for color variables.\nCurrently, uno doesn't support this directly.\n\ntw: `class=\"bg-[var(--color-primary)]/20\"` ✓\nuno: `class=\"bg-[var(--color-primary)]/20\"` ✕\nuno: `class=\"bg-[rgb(255,5,5)]/20\"` ✓\n\n```css\n:root {\n --color-primary: rgb(255, 5, 5);\n}\n```\n\nAfter observing ui usage, uno rules were added:\n\nuno: `class=\"bg-[var(--ui-primaey)]/20\"` ✓\nuno: `class=\"hover:bg-[var(--ui-primaey)]/75\"` ✓\n\n**Solution:**\n\n```ts\n rules: [\n [/(?:([^:\\s]+):)?bg-.*?\\[(var\\(--[^-]+-[^)]+\\))\\]\\/(\\d+)/, function* ([, modifier, color, alpha], { symbols }) {\n yield {\n background: `color-mix(in oklab, ${color} ${alpha}%, transparent)`\n }\n if (modifier) {\n yield {\n [symbols.selector]: selector => `${selector}:${modifier}`,\n background: `color-mix(in oklab, ${color} ${alpha}%, transparent)`\n }\n }\n }],\n [/(?:([^:\\s]+):)?text-.*?\\[(var\\(--[^-]+-[^)]+\\))\\]\\/(\\d+)/, function* ([, modifier, color, alpha], { symbols }) {\n yield {\n color: `color-mix(in oklab, ${color} ${alpha}%, transparent)`\n }\n if (modifier) {\n yield {\n [symbols.selector]: selector => `${selector}:${modifier}`,\n color: `color-mix(in oklab, ${color} ${alpha}%, transparent)`\n }\n }\n }]\n ],\n```\n\n---\n\nNow, let's run the playground! ~\n\n## Notes\n\n### tm's handling of tw and uno exclusive rules yields unexpected results\n\ntw doesn't directly support units (px, em, ...) like `text-Xpx`, requiring `text-[Xpx]` instead.\n\n- `text-md text-[20px]` --> `text-[20px]`\n- `text-md text-20px` --> `text-md text-20px`\n- `text-16px text-20px` --> `text-20px`\n- `text-[16px] text-[20px]` --> `text-[20px]`\n\n**When using ui, it's recommended to pass classes that tw can also parse.**\n\n[Commits · byronogis/ui](https://github.com/byronogis/ui/commits/test/use-unocss/)\n\n---\n\n\n[nuxt-ui-href]: https://ui3.nuxt.dev\n[tailwindcss-href]: https://tailwindcss.com/docs/v4-beta\n[tailwind-variants-href]: https://www.tailwind-variants.org/\n[tailwind-merge-href]: https://github.com/dcastil/tailwind-merge\n[unocss-href]: https://unocss.dev/\n[tw-prefix-href]: https://tailwindcss.com/docs/v4-beta#using-a-prefix\n",[3110],{"name":3111,"color":3112},"question","d876e3",3011,"[Attempt] Exploring the Coexistence of Nuxt UI v3 and UnoCSS","2025-05-10T19:47:10Z","https://github.com/nuxt/ui/issues/3011",0.70128715,{"description":3119,"labels":3120,"number":3127,"owner":3028,"repository":3029,"state":3068,"title":3128,"updated_at":3129,"url":3130,"score":3131},"### 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_",[3121,3122,3123,3126],{"name":3019,"color":3020},{"name":3025,"color":3026},{"name":3124,"color":3125},"closed-by-bot","ededed",{"name":3088,"color":3125},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.7048188,{"description":3133,"labels":3134,"number":3137,"owner":3028,"repository":3028,"state":3068,"title":3138,"updated_at":3139,"url":3140,"score":3141},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.20.3\r\n- Nuxt Version: 3.12.2\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.6\r\n- Package Manager: yarn@1.22.19\r\n- Builder: -\r\n- User Config: buildModules, plugins\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nNuxt : https://stackblitz.com/edit/github-9ukebr-n5eon6?file=package.json\r\n\r\nVue : https://stackblitz.com/edit/github-iswjxq-hto8un?file=src%2Fmain.ts,src%2FApp.vue\n\n### Describe the bug\n\nHi,\r\n\r\nI tried to create a directive who add a class to an element but I have this warning : \r\n```\r\nHydration class mismatch on \u003Cdiv class=\"test b-red\" data-v-inspector=\"pages/index.vue:2:3\">Hello World!\u003C/div> \r\n - rendered on server: class=\"test b-red\"\r\n - expected on client: class=\"test\"\r\n Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.\r\n```\r\n\r\nI have done the reproduction on Vue and Nuxt, because I do not have this error on Vue (only in Nuxt).\r\n\r\nTo see this error, you need to open the console, do not only look on StackBlitz terminal.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n[Vue warn]: Hydration class mismatch on \r\n \u003Cdiv class=\"test b-red\" data-v-inspector=\"pages/index.vue:2:3\">Hello World!\u003C/div>\r\n - rendered on server: class=\"test b-red\"\r\n - expected on client: class=\"test\"\r\n Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.\r\n You should fix the source of the mismatch. \r\n at \u003CIndex onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CAnonymous key=\"/\" vnode= \r\n{__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …}\r\n route= \r\n{fullPath: '/', hash: '', query: {…}, name: 'index', path: '/', …}\r\n ... > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CElMain> \r\n at \u003CElContainer> \r\n at \u003CElContainer> \r\n at \u003CDefault ref=Ref\u003C undefined > > \r\n at \u003CLayoutLoader key=\"default\" layoutProps= \r\n{ref: RefImpl}\r\n name=\"default\" > \r\n at \u003CNuxtLayoutProvider layoutProps= \r\n{ref: RefImpl}\r\n key=\"default\" name=\"default\" ... > \r\n at \u003CNuxtLayout> \r\n at \u003CApp key=4 > \r\n at \u003CNuxtRoot>\n```\n",[3135,3136],{"name":3059,"color":3060},{"name":3062,"color":3063},27664,"Directive Custom | Hydration error when adding a class","2024-06-17T14:36:14Z","https://github.com/nuxt/nuxt/issues/27664",0.7058249,["Reactive",3143],{},["Set"],["ShallowReactive",3146],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fICMw18ShlW12_7y3HQVkdZcUZGfydpi5s_3Qvk9k1r0":-1},"/nuxt/ui/4303"]