\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```",[3134,3137,3140],{"name":3135,"color":3136},"bug","d73a4a",{"name":3138,"color":3139},"v3","49DCB8",{"name":3141,"color":3142},"triage","ffffff",4530,"nuxt","ui","open","[UInputTags, UInputMenu] Theming behaviour issues","2025-07-15T17:50:02Z","https://github.com/nuxt/ui/issues/4530",0.66067123,{"description":3152,"labels":3153,"number":3157,"owner":3144,"repository":3145,"state":3146,"title":3158,"updated_at":3159,"url":3160,"score":3161},"### Environment\n\n- Operating System: Darwin\n- Node Version: v23.11.0\n- Nuxt Version: 3.17.3\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: devtools, typescript, css, compatibilityDate, devServer, vite, runtimeConfig, app, ui, scripts, modules, sentry, sourcemap\n- Runtime Modules: @nuxt/ui@3.1.2, @pinia/nuxt@0.11.0, pinia-plugin-persistedstate/nuxt@4.3.0, @sentry/nuxt/module@9.19.0, @nuxt/scripts@0.11.7, @nuxt/eslint@1.4.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.2\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/r7ryl3\n\n### Description\n\nI recently upgrade to NuxtUI 3.1.2 (from 3.0.1) and It's impossible (or I don't know) how to deal with custom type for `InputMenu`, I got some types issues on `label-key`, `v-model`, `items`, `slots` as you can see in my reproduction.\n\n### Additional context\n\n\n\n### Logs\n\n```shell-script\n\n```",[3154,3155,3156],{"name":3135,"color":3136},{"name":3138,"color":3139},{"name":3141,"color":3142},4182,"Custom type with InputMenu","2025-05-19T12:22:28Z","https://github.com/nuxt/ui/issues/4182",0.6796023,{"description":3163,"labels":3164,"number":3168,"owner":3144,"repository":3144,"state":3146,"title":3169,"updated_at":3170,"url":3171,"score":3172},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.17.0`\n- Nuxt Version: `4.0.3`\n- CLI Version: `3.28.0`\n- Nitro Version: `2.12.4`\n- Package Manager: `pnpm@10.12.1`\n- Builder: `-`\n- User Config: `compatibilityDate`, `devtools`\n- Runtime Modules: `-`\n- Build Modules: `-`\n\n\n### Reproduction\n\nVue SSR (correct order): https://stackblitz.com/edit/github-ifxk7hsj?file=src/components/BlueSquare.vue,src/pages/Home.vue\n\nVue (correct order in dev mode): https://stackblitz.com/edit/vitejs-vite-h4thdsyp?file=src/components/BlueSquare.vue,src/App.vue&terminal=dev\n\nNuxt (wrong order in prod): https://stackblitz.com/edit/github-ristas3f-hetgu6mm?file=app%2Fcomponents%2FBlueSquare.vue,app%2Fapp.vue\n\n### Describe the bug\n\nThis is a follow-up on:\n- https://github.com/nuxt/nuxt/issues/25229\n- https://github.com/nuxt/nuxt/issues/23785\n\nThe styles are now correctly ordered in the `entry.css` file, but the rendered `\u003Cstyle>` tags are not.\nStyles from the parent component should always have a higher priority _(in the case of equal specificity - be defined later)_ than the styles from children.\n\nCurrently, after the `entry.css` file loads, the correct styles get applied, however, **while the css file is loading**, the styles are broken due to the rendered `\u003Cstyle>` tags being ordered incorrectly. This can cause layout shifts / flashes / etc.\n\n\n```vue\n// CHILD\n\u003Ctemplate>\n \u003Cdiv class=\"blue\" />\n\u003C/template>\n\n\u003Cstyle scoped>\n.blue { background-color: blue; }\n\u003C/style>\n```\n\n```vue\n// PARENT\n\u003Ctemplate>\n \u003Cdiv>\n \u003CBlueSquare class=\"red\" />\n \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\n.red { background-color: red; }\n\u003C/style>\n```\n\nBoth plain Vue and Vue with SSR have the correct order:\n\n**Vue**\n\u003Cimg width=\"714\" height=\"163\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/fa26e7f4-3f89-4bae-b0b1-1fd19f383a02\" />\n\n**Vue SSR**\n\u003Cimg width=\"601\" height=\"190\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7e1dc7cc-4b32-4ccc-957c-dd207b7a836d\" />\n\n\nBut in Nuxt, the order is incorrect when built:\n\n**Nuxt**\n\u003Cimg width=\"596\" height=\"85\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/62458e07-886e-4c0b-b569-db6e08805f35\" />\n\n\n---\n\n\nIs this Nuxt related or not?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3165],{"name":3166,"color":3167},"pending triage","E99695",33041,"Incorrect component style order","2025-09-02T22:32:28Z","https://github.com/nuxt/nuxt/issues/33041",0.68642765,{"description":3174,"labels":3175,"number":3179,"owner":3144,"repository":3145,"state":3146,"title":3180,"updated_at":3181,"url":3182,"score":3183},"### Environment\n\n------------------------------\n- Operating System: Linux\n- Node Version: v20.12.0\n- Nuxt Version: 3.17.3\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@8.15.6\n- Builder: -\n- User Config: modules, devtools, compatibilityDate, future, css\n- Runtime Modules: @nuxt/ui@3.2.0\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.2.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/fragrant-fog-7ck4yf\n\nThe schema specifies that the items within the list must be numbers, and the UForm catches the error (displayed in the UAlert below), but the UInputTag object doesn't display it\n\n\u003Cimg width=\"780\" height=\"220\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/9594e307-2f7d-4928-b877-d08795abc4b5\" />\n\n### Description\n\nThe UInputTag element does not correctly render the error text for schema validation errors for pattern matching of the individual items within its array. \n\nIt works fine showing an error about the length of the array, but not about problems for the items within the array.\n\n\u003Cimg width=\"779\" height=\"328\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/cf031108-314b-4fd5-9859-cd275b8d3410\" />\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3176,3177,3178],{"name":3135,"color":3136},{"name":3138,"color":3139},{"name":3141,"color":3142},4573,"UInputTag does not display validation errors for pattern matching","2025-07-22T14:39:33Z","https://github.com/nuxt/ui/issues/4573",0.68935627,{"description":3185,"labels":3186,"number":3190,"owner":3144,"repository":3145,"state":3146,"title":3191,"updated_at":3192,"url":3193,"score":3194},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.12.0\n- Nuxt Version: 3.17.3\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@8.15.6\n- Builder: -\n- User Config: modules, devtools, compatibilityDate, future, css\n- Runtime Modules: @nuxt/ui@3.1.1\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/nuxt-ui3-n3sxks\n\n### Description\n\nWe're defining our typography style guide as custom utilities that consist of `font-size` and `font-weight` declarations like so\n\n```css\n/* main.css */\n@import 'tailwindcss'\n@import 'nuxt/ui'\n\n@utility text-display-1 {\n font-size: 54px;\n font-weight: 600;\n}\n\n@utility text-display-2 {\n ...\n}\n```\n\nWhen applying custom utilities to Nuxt UI components, whether globally in `app.config` or individually via the `ui` prop, only one class is applied, and the other is discarded. For example, with the Button component has `text-sm font-medium` applied by default to the `base` slot, passing `text-display-1` to that slot only overrides the size (blue arrow in the screenshot) while the weight still uses the `font-medium` class (red arrows in the screenshot)\n\n\n\nCommenting either one of the classes applies the other correctly. The problem happens only if there are two (or more?) classes\n\n### Additional context\n\nWe workaround this by marking the class as important `!text-display-1`\n\n### Logs\n\n```shell-script\n\n```",[3187,3188,3189],{"name":3135,"color":3136},{"name":3138,"color":3139},{"name":3141,"color":3142},4303,"Custom utility with 2 or more declarations are not applied correctly","2025-06-09T18:00:28Z","https://github.com/nuxt/ui/issues/4303",0.69619375,{"description":3196,"labels":3197,"number":3203,"owner":3144,"repository":3145,"state":3204,"title":3205,"updated_at":3206,"url":3207,"score":3208},"### Environment\n\n- Operating System: `Windows_NT`\n- Node Version: `v22.14.0`\n- Nuxt Version: `3.17.5`\n- CLI Version: `3.25.1`\n- Nitro Version: `2.11.12`\n- Package Manager: `npm@10.9.2`\n- Builder: `-`\n- User Config: `compatibilityDate`, `devtools`, `srcDir`, `routeRules`, `app`, `svgSprite`, `alias`, `css`, `imports`, `modules`, `ssr`, `runtimeConfig`\n- Runtime Modules: `@nuxt/eslint@1.4.1`, `@nuxt/fonts@0.11.4`, `@nuxt/icon@1.14.0`, `@nuxt/image@1.10.0`, `@nuxt/scripts@0.11.8`, `@nuxt/test-utils@3.19.1`, `@nuxt/ui@3.1.3`, `@nuxtjs/svg-sprite@1.0.2`\n- Build Modules: `-`\n\n\n### Is this bug related to Nuxt or Vue?\n\n\nNuxt\n\n### Version\n\nv3.2.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/dreamy-euler-9595k7\n\n\n### Description\n\n\n\nHi when i select copy payment id i got that error when i console log the row it gives me undefined upon clicking kindly check this link: https://ui.nuxt.com/components/table#with-context-menu\n\n#4259 \n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3198,3199,3202],{"name":3135,"color":3136},{"name":3200,"color":3201},"needs reproduction","CB47CF",{"name":3138,"color":3139},4452,"closed","UTable context menu error during selection of items","2025-07-13T16:34:46Z","https://github.com/nuxt/ui/issues/4452",0.6745772,{"description":3210,"labels":3211,"number":3220,"owner":3144,"repository":3145,"state":3204,"title":3221,"updated_at":3222,"url":3223,"score":3224},"### Description\n\nHi,\r\n\r\nI have a customized Nuxt UI setup, with multiple variants and colors for the UInput elements set in the app.config. Currently if the input is in error state inside a FormGroup, it will override the input classes only with the base classes, and it will not use my classes for the given variant.\r\n\r\n`input: {\r\n base: 'dark:focus:ring-1 ring-1 dark:focus:bg-white dark:focus:text-hollow font-bold dark:focus:placeholder-black/30',\r\n placeholder: \"dark:placeholder-white/30\",\r\n size: {\r\n xs: 'text-xs',\r\n sm: 'text-[13px]',\r\n xl: 'text-[13px]'\r\n },\r\n padding: {\r\n xs: 'px-4 py-0 h-8',\r\n sm: 'px-4 py-0 h-12',\r\n xl: 'h-14 px-4 py-0'\r\n },\r\n color: {\r\n white: {\r\n outline: 'dark:bg-primaryBg dark:placeholder-white/10',\r\n solid: \"dark:bg-hollow dark:placeholder-white/30\",\r\n soft: 'dark:bg-white/10 dark:placeholder-white/10',\r\n },\r\n primary: {\r\n solid: \"dark:text-peach-500 dark:placeholder-peach-500/40 dark:bg-hollow dark:ring-0 font-bold\"\r\n },\r\n },\r\n rounded: \"rounded-lg\",\r\n default: {\r\n variant: 'solid'\r\n }\r\n }`\r\n\r\n\n\n### Additional context\n\n_No response_",[3212,3215,3218],{"name":3213,"color":3214},"enhancement","a2eeef",{"name":3216,"color":3217},"closed-by-bot","ededed",{"name":3219,"color":3217},"stale",1593,"UInput error state style override","2025-06-19T02:12:46Z","https://github.com/nuxt/ui/issues/1593",0.6760557,{"description":3226,"labels":3227,"number":3235,"owner":3144,"repository":3144,"state":3204,"title":3236,"updated_at":3237,"url":3238,"score":3239},"### 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.",[3228,3231,3232],{"name":3229,"color":3230},"3.x","29bc7f",{"name":3166,"color":3167},{"name":3233,"color":3234},"upstream","E8A36D",25626,"Tailwind classes missing in v-for loop.","2024-02-05T11:55:12Z","https://github.com/nuxt/nuxt/issues/25626",0.68219244,{"description":3241,"labels":3242,"number":3247,"owner":3144,"repository":3145,"state":3204,"title":3248,"updated_at":3249,"url":3250,"score":3251},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v24.2.0\n- Nuxt Version: 4.0.1\n- CLI Version: 3.27.0\n- Nitro Version: 2.12.4\n- Package Manager: npm@11.3.0\n- Builder: -\n- User Config: compatibilityDate, devtools, extends, pinia, css, ui, modules, runtimeConfig, nitro\n- Runtime Modules: @nuxt/eslint@1.7.1, @nuxt/image@1.10.0, @nuxt/ui@3.3.0, @pinia/nuxt@0.11.2, pinia-plugin-persistedstate/nuxt@4.4.1\n- Build Modules: -\n------------------------------\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n4.0.1\n\n### Reproduction\n\n```\n\u003Ctemplate>\n \u003Cdiv class=\"flow-root mb-3\">\n \u003Cul role=\"list\" class=\"-my-6 divide-y divide-gray-200\">\n \u003Cli v-for=\"product in basketStore.items\" :key=\"product.rid\" class=\"flex py-6\">\n \u003Cdiv class=\"hidden sm:block h-24 w-24 flex-shrink-0 overflow-hidden rounded-md border border-gray-200\">\n \u003CProductsProductImage />\n \u003C/div>\n\n \u003Cdiv class=\"ml-4 flex flex-1 flex-col\">\n \u003Cdiv>\n \u003Cdiv class=\"flex justify-between text-base font-medium text-gray-900 mb-2\">\n \u003CNuxtLink :to=\"'/product/' + product.id\">{{ product.name }}\u003C/NuxtLink>\n \u003Cp class=\"ml-4\">£{{ product.selectedQuantity?.price }}\u003C/p>\n \u003C/div>\n \u003C/div>\n\n \u003Cdiv class=\"flex flex-1 flex-col md:flex-row items-end justify-between text-sm text-black gap-4\">\n \u003Cdiv class=\"w-full flex flex-col md:flex-row flex-wrap gap-2 \">\n \u003CUSelectMenu v-if=\"hasMultipleSkus(product)\" class=\"max-w-56\" v-model=\"product.selectedSku\"\n :search-input=\"false\" :label-key=\"'name'\" :items=\"product.skus\"\n @update:modelValue=\"changeSku($event as Sku, product)\">\n \u003C/USelectMenu>\n \u003Cpre>{{ product.selectedQuantity }}\u003C/pre>\n \u003CUSelectMenu v-model=\"product.selectedQuantity\" :search-input=\"false\"\n :label-key=\"'quantity'\" class=\"max-w-56\" :items=\"updatePricesWithStock(product)\"\n @update:modelValue=\"changeQuantity($event as QuantityPrice, product)\">\n \u003Ctemplate #item=\"{ item }\">\u003Cspan>{{ item.quantity }}\u003C/span>\u003Cspan\n v-if=\"item.disabled\">Out of\n stock\u003C/span>\u003C/template>\n \u003C/USelectMenu>\n \u003C/div>\n \u003Cdiv class=\"flex\">\n \u003Cbutton type=\"button\" class=\"font-medium text-primary-500 hover:text-primary-600\"\n @click=\"basketStore.remove(product.rid)\">Remove\u003C/button>\n \u003C/div>\n\n \u003C/div>\n\n \u003C/div>\n \u003C/li>\n\n \u003C/ul>\n \u003C/div>\n\u003C/template>\n\u003Cscript setup lang=\"ts\">\nimport type { Product, Sku, QuantityPrice } from '../../types';\n\nfunction changeSku(sku: Sku, item: Product) {\n\n}\n\nfunction hasMultipleSkus(item: Product): boolean {\n\n}\n\n\nfunction changeQuantity(quantity: QuantityPrice, item: Product) {\n\n}\n\n// Helper function to map prices and add \"disabled\" property - see other \nconst updatePricesWithStock = (item: any) => {\n return item.selectedSku?.prices.map((price: QuantityPrice) => ({\n ...price,\n disabled: !item?.onDemand && price.quantity > item.selectedSku?.stock\n }));\n};\n\n\n\u003C/script>\n```\n\n### Description\n\n_(Not sure whether to include this issue in Nuxt or Nuxt UI)_\n\nI have a base component that uses a selectMenu with an array. In Nuxt 3.17.6 with compatibiltyVersion: 4 set, the SelectMenu works as expected. When upgrading to nuxt 4 the label key no longer works. I'll attach screenshots and the code is in the reproduction section.\n**Nuxt 3.17.6**\n\u003Cimg width=\"736\" height=\"216\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/04967fa3-d156-46e2-b74d-f060ec68fcc4\" />\n\n**Nuxt 4**\n\u003Cimg width=\"751\" height=\"220\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/8ccf4caf-12f1-46d0-beda-9ebea3b1eee3\" />\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3243,3244,3245,3246],{"name":3135,"color":3136},{"name":3200,"color":3201},{"name":3138,"color":3139},{"name":3141,"color":3142},4627,"SelectMenu | Label Key not working correctly with Nuxt 4?","2025-07-30T09:17:46Z","https://github.com/nuxt/ui/issues/4627",0.6835448,{"labels":3253,"number":3259,"owner":3144,"repository":3144,"state":3204,"title":3260,"updated_at":3261,"url":3262,"score":3263},[3254,3255,3256],{"name":3219,"color":3142},{"name":3166,"color":3167},{"name":3257,"color":3258},"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.6861684,["Reactive",3265],{},["Set"],["ShallowReactive",3268],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fjk6-l8r74_6gOuhlIMNIz7lFWyHEYGaYJ_d4STPlC1Q":-1},"/nuxt/ui/4752"]