\n```\n\n\n### Description\n\nWhen using `UInputMenu`, each item can be assigned a custom class. However, after filtering, the class assignment seems to mismatch. For example, the \"Green\" item may be displayed in red color.\n\n### Additional context\n\n- Initial state (before filtering): \n\u003Cimg width=\"328\" height=\"243\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/f556d5b4-554e-4328-98f1-e3bb037504bf\" />\n\n- After filtering with \"r\": \n\u003Cimg width=\"338\" height=\"206\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/bbed6c9b-2eae-4c55-9d68-2991f64c26ca\" />\n\nIn the filtered state, the \"Green\" item is incorrectly displayed in red.\n\n### Logs\n\n```shell-script\n\n```",[3139,3142,3145],{"name":3140,"color":3141},"bug","d73a4a",{"name":3143,"color":3144},"v3","49DCB8",{"name":3146,"color":3147},"triage","ffffff",4752,"nuxt","ui","open","UInputMenu item class mismatch after filtering","2025-08-15T01:57:20Z","https://github.com/nuxt/ui/issues/4752",0.6950865,{"description":3157,"labels":3158,"number":3162,"owner":3149,"repository":3150,"state":3151,"title":3163,"updated_at":3164,"url":3165,"score":3166},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.15.0\n- Nuxt Version: 3.17.7\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.13\n- Package Manager: pnpm@10.10.0\n- Builder: -\n- User Config: compatibilityDate, devtools, modules, fonts, icon, components, css, ui\n- Runtime Modules: @nuxt/fonts@0.11.4, @nuxt/eslint@1.5.2, @nuxt/icon@1.15.0, @nuxt/image@1.10.0, @nuxt/ui@3.2.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.2.0\n\n### Reproduction\n\nTheming with either of this method such as:\n\n### Theming in `app.config.ts`\nSame issue for both UInputTags and UInputMenu (multiple)\n```typescript\ninputTags: {\n ...\n compoundVariants: [\n {\n variant: 'outline',\n class : {\n root: 'root-test',\n base: 'base-test',\n },\n },\n ],\n},\ninputMenu: {\n ...\n compoundVariants: [\n // Works properly\n {\n variant: 'outline',\n class : {\n root: 'root-test',\n base: 'base-test',\n },\n },\n // Wrong behaviour\n {\n variant: 'outline',\n multiple: true,\n class : {\n root: 'root-test',\n base: 'base-test',\n },\n },\n ],\n},\n\n```\n### Theming directly using `ui`\n```tsx\n\u003CUInputTags\n ...\n :ui=\"{\n root: 'root-test',\n base: 'base-test',\n }\"\n/>\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```",[3159,3160,3161],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3146,"color":3147},4530,"[UInputTags, UInputMenu] Theming behaviour issues","2025-07-15T17:50:02Z","https://github.com/nuxt/ui/issues/4530",0.69944125,{"description":3168,"labels":3169,"number":3170,"owner":3149,"repository":3171,"state":3151,"title":3172,"updated_at":3173,"url":3174,"score":3175},"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":3177,"labels":3178,"number":3188,"owner":3149,"repository":3149,"state":3189,"title":3190,"updated_at":3191,"url":3192,"score":3193},"### 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.",[3179,3182,3185],{"name":3180,"color":3181},"3.x","29bc7f",{"name":3183,"color":3184},"pending triage","E99695",{"name":3186,"color":3187},"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,{"description":3195,"labels":3196,"number":3203,"owner":3149,"repository":3150,"state":3189,"title":3204,"updated_at":3205,"url":3206,"score":3207},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.13.1\n- Nuxt Version: 3.16.1\n- CLI Version: 3.23.1\n- Nitro Version: 2.11.8\n- Package Manager: yarn@4.8.1\n- Builder: -\n- User Config: compatibilityDate, imports, components, devtools, modules, css, fonts, ui\n- Runtime Modules: @nuxt/eslint@1.2.0, @nuxt/fonts@0.11.0, @nuxt/image@1.10.0, @nuxt/test-utils@3.17.2, @nuxt/ui@3.0.2\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.2\n\n### Reproduction\n\nhttps://github.com/nuxt/ui/blob/v3/src/theme/button.ts\n\n### Description\n\nI want to customize a button variant by `size`, `trailing` and `square` params. It works, but the types are broken.\n\nThe line in the `compoundVariants`:\n`{ size: 'md', trailing: true, square: false, class: { trailingIcon: '-mr-1' } }`\n\nErrors:\n`Type '{ trailingIcon: string; }' is not assignable to type 'string'`\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3197,3198,3199,3200],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3146,"color":3147},{"name":3201,"color":3202},"stale","ededed",3738,"Incorrect compound button variants types","2025-08-12T11:07:19Z","https://github.com/nuxt/ui/issues/3738",0.6961785,{"labels":3209,"number":3215,"owner":3149,"repository":3149,"state":3189,"title":3216,"updated_at":3217,"url":3218,"score":3219},[3210,3211,3212],{"name":3180,"color":3181},{"name":3183,"color":3184},{"name":3213,"color":3214},"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":3221,"number":3227,"owner":3149,"repository":3149,"state":3189,"title":3228,"updated_at":3229,"url":3230,"score":3231},[3222,3223,3224],{"name":3201,"color":3147},{"name":3183,"color":3184},{"name":3225,"color":3226},"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":3233,"labels":3234,"number":3236,"owner":3149,"repository":3149,"state":3189,"title":3237,"updated_at":3238,"url":3239,"score":3240},"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>",[3235],{"name":3225,"color":3226},2877,"Unknown custom element","2023-01-18T16:09:43Z","https://github.com/nuxt/nuxt/issues/2877",0.7011398,{"description":3242,"labels":3243,"number":3247,"owner":3149,"repository":3150,"state":3189,"title":3248,"updated_at":3249,"url":3250,"score":3251},"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",[3244],{"name":3245,"color":3246},"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":3253,"labels":3254,"number":3258,"owner":3149,"repository":3150,"state":3189,"title":3259,"updated_at":3260,"url":3261,"score":3262},"### Environment\n\n------------------------------\n- Operating System: Windows_NT \n- Node Version: v22.16.0 \n- Nuxt Version: 4.0.2 \n- CLI Version: 3.27.0 \n- Nitro Version: 2.12.4 \n- Package Manager: pnpm@10.14.0 \n- Builder: - \n- User Config: devtools, modules, css, compatibilityDate, ssr, devServer, vite, app \n- Runtime Modules: @nuxt/ui@3.3.0, nuxt-auth-utils@0.5.22, @vueuse/nuxt@13.6.0, @nuxt/image@1.11.0, @nuxt/icon@1.15.0, @nuxt/fonts@0.11.4, @nuxtjs/i18n@10.0.3, @nuxt/scripts@0.11.10 \n- Build Modules: - \n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.3.0\n\n### Reproduction\n\n1. Try to style the Command Palette components according to my config and slot config.\n2. See the Command Palette Item styles not being applied\n\n### Description\n\n\n\nI'm trying to change the background and the text of the command palette items when they're highlighted. Below is my `app.config.ts` that tries to change background and text (which doesn't work.)\n\n```ts [app.config.ts]\nexport default defineAppConfig({\n // https://ui3.nuxt.dev/getting-started/theme#design-system\n ui: {\n colors: {\n primary: 'rose',\n neutral: 'zinc',\n },\n commandPalette: {\n variants: {\n active: {\n true: {\n item: 'before:bg-primary text-inverted',\n itemLeadingIcon: 'text-primary'\n }\n }\n }\n }\n }\n})\n```\n\nI've also tried using the `ui` slot on the component as well, which also did not work:\n\n```vue\n\u003CUCommandPalette\n :ui=\"{\n root: 'h-screen! u-command-palette',\n content: 'h-full',\n empty: 'p-0 h-full',\n item: 'data-highlighted:bg-primary rounded-md text-primary! data-highlighted:text-primary!',\n itemLabel: 'text-primary data-highlighted:text-primary!'\n }\"\n\u003C!-- some additional props i'm going to ignore here -->\n >\n\u003C!-- most of the other stuff -->\n\n// the u-command-palette class is empty. its there so I can query it using the doc selector\n```\n\nEven when I try to style the text just to the primary color without it being highlighted, it fails. I'm not sure why it's not working.\n\nIn addition to that, and I'm not sure whether this is intended behavior, when I use the `item` property in the `ui` slot, it seems to unstyle its rounded corners for some... weird reason. Not sure why.\n\nHere's the source code: https://github.com/CTRL-Neo-Studios/cubit/blob/dev/app/components/Cubit/Layout/Module/CubitModuleNavigationLayout.vue\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3255,3256,3257],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3146,"color":3147},4651,"Command Palette UI Theme Not Overriden in Config","2025-08-04T16:52:06Z","https://github.com/nuxt/ui/issues/4651",0.70420426,["Reactive",3264],{},["Set"],["ShallowReactive",3267],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fICMw18ShlW12_7y3HQVkdZcUZGfydpi5s_3Qvk9k1r0":-1},"/nuxt/ui/4303"]