\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```",[3156,3157,3160],{"name":3140,"color":3141},{"name":3158,"color":3159},"v3","49DCB8",{"name":3143,"color":3144},4530,"[UInputTags, UInputMenu] Theming behaviour issues","2025-07-15T17:50:02Z","https://github.com/nuxt/ui/issues/4530",0.6964526,{"description":3167,"labels":3168,"number":3172,"owner":3146,"repository":3147,"state":3148,"title":3173,"updated_at":3174,"url":3175,"score":3176},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.14.0`\n- Nuxt Version: `3.18.0`\n- CLI Version: `3.27.0`\n- Nitro Version: `2.12.4`\n- Package Manager: `pnpm@10.12.3`\n- Builder: `-`\n- User Config: `modules`, `ssr`, `components`, `devtools`, `app`, `css`, `colorMode`, `runtimeConfig`, `future`, `experimental`, `compatibilityDate`, `eslint`, `fonts`, `icon`, `supabase`\n- Runtime Modules: `@nuxt/eslint@1.4.1`, `reka-ui/nuxt@2.4.0`, `@nuxt/ui@3.2.0`, `@nuxtjs/supabase@1.5.2`, `@vueuse/nuxt@13.6.0`\n- Build Modules: `-`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.3.0\n\n### Reproduction\n\nWhen `active` is set to true on the first item, the active item is always the last one.\n\n### Description\n\nWhen `active` is set to true on the first item, the active item is always the last one.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3169,3170,3171],{"name":3140,"color":3141},{"name":3158,"color":3159},{"name":3143,"color":3144},4642,"Breadcrumb: `active` property to force the current active item is ignored","2025-08-01T13:24:32Z","https://github.com/nuxt/ui/issues/4642",0.69750845,{"description":3178,"labels":3179,"number":3186,"owner":3146,"repository":3147,"state":3187,"title":3188,"updated_at":3189,"url":3190,"score":3191},"### 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```",[3180,3181,3182,3183],{"name":3140,"color":3141},{"name":3158,"color":3159},{"name":3143,"color":3144},{"name":3184,"color":3185},"stale","ededed",3738,"closed","Incorrect compound button variants types","2025-08-12T11:07:19Z","https://github.com/nuxt/ui/issues/3738",0.67244637,{"description":3193,"labels":3194,"number":3197,"owner":3146,"repository":3147,"state":3187,"title":3198,"updated_at":3199,"url":3200,"score":3201},"### Environment\n\n- node:V18.19.1\n- pnpm: V8.15.5\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.15.1\n\n### Reproduction\n\nhttps://github.com/Jevin0/nuxt-ui-no-style-demo/blob/master/app.vue\n\n### Description\n\n\n### step\n1. `pnpm dlx nuxi@latest init \u003Cproject-name>`\n2. `npx nuxi@latest module add ui`\n3. `pnpm install`\n4. `pnpm dev`\n\n### concern\nNormal use of `UButton` component, but no background color and Color\n\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3195,3196],{"name":3140,"color":3141},{"name":3158,"color":3159},3047,"No style","2025-02-24T22:33:59Z","https://github.com/nuxt/ui/issues/3047",0.69593906,{"description":3203,"labels":3204,"number":3211,"owner":3146,"repository":3147,"state":3187,"title":3212,"updated_at":3213,"url":3214,"score":3215},"### Environment\n\n- Operating System: Darwin\n- Node Version: v21.7.3\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.1\n- Nitro Version: 2.11.8\n- Package Manager: npm@10.5.0\n- Builder: -\n- User Config: extends, components, devtools, googleFonts, modules, runtimeConfig, compatibilityDate, typescript, build, vite, devServer, app, colorMode, spaLoadingTemplate, bugsnag\n- Runtime Modules: @nuxtjs/google-fonts@3.2.0, @nuxt/ui@3.0.2, nuxt-bugsnag@8.4.0, @nuxt/devtools@2.3.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\n\n\n### Description\n\nI try to make a design with position absolute. It works correctly when I use `solid` colors. But if I use `soft` or `subtle` variants it displays the background line anyway. Also, the color varies depending on the background color.\n\nIs there a way to make it work with those colors? \n\nMaybe the solution is to create variables for those colors instead of using opacity.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3205,3206,3207,3208,3210],{"name":3140,"color":3141},{"name":3158,"color":3159},{"name":3143,"color":3144},{"name":3209,"color":3185},"closed-by-bot",{"name":3184,"color":3185},3863,"Button color may not work properly in position absolute","2025-06-18T09:01:10Z","https://github.com/nuxt/ui/issues/3863",0.70127743,{"description":3217,"labels":3218,"number":3225,"owner":3146,"repository":3146,"state":3187,"title":3226,"updated_at":3227,"url":3228,"score":3229},"### Environment\n\n- Operating System: Darwin\r\n- Node Version: v18.18.2\r\n- Nuxt Version: 3.8.2\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.0\r\n- Package Manager: npm@9.8.1\r\n- Builder: -\r\n- User Config: devtools, modules, srcDir, css, vite, app, eslint, stylelint, gtag, image\r\n- Runtime Modules: @nuxtjs/eslint-module@4.1.0, @nuxtjs/stylelint-module@5.1.0, @nuxt/image@1.1.0, nuxt-icon@0.6.6, nuxt-gtag@1.1.1\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-hqpmmt?file=app.vue\n\n### Describe the bug\n\nTo reproduce, click on one of the two links. This should turn the link colour to pink. Then refresh the playground browser (not the whole browser)\r\n\r\nExpected: The link should have a class of `active` and be pink\r\n\r\nActual: The link doesn't have the class of `active` but the value is true. Also causes the link to no receive the `active` class when clicked again after reload\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3219,3222],{"name":3220,"color":3221},"3.x","29bc7f",{"name":3223,"color":3224},"pending triage","E99695",24723,"v-bind:class isn't reactive on page load","2023-12-19T14:49:34Z","https://github.com/nuxt/nuxt/issues/24723",0.70510113,{"description":3231,"labels":3232,"number":3235,"owner":3146,"repository":3147,"state":3187,"title":3236,"updated_at":3237,"url":3238,"score":3239},"### Environment\n\n\"@vueuse/nuxt\": \"^13.1.0\"\n\"@nuxt/ui\": \"^3.1.2\"\nnode: lts/jod (22.11.0)\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.2\n\n### Reproduction\n\n\n\n\n\n### Description\n\nWhen using the UTab component with the variant=\"link\", applying custom CSS classes to enable horizontal scrolling (e.g., overflow-x: auto; or equivalent utility classes) causes the visual style indicating the currently active tab to be lost or overridden.\n\n```js\n{\n variant: 'link',\n ui: {\n list: 'bg-white overflow-x-auto overflow-y-hidden',\n trigger: 'min-w-auto'\n }\n}\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3233,3234],{"name":3140,"color":3141},{"name":3158,"color":3159},4198,"UTabs style issue","2025-05-23T13:23:24Z","https://github.com/nuxt/ui/issues/4198",0.70646083,{"labels":3241,"number":3247,"owner":3146,"repository":3146,"state":3187,"title":3248,"updated_at":3249,"url":3250,"score":3251},[3242,3243,3244],{"name":3184,"color":3144},{"name":3223,"color":3224},{"name":3245,"color":3246},"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.7088158,{"description":3253,"labels":3254,"number":3259,"owner":3146,"repository":3146,"state":3187,"title":3260,"updated_at":3261,"url":3262,"score":3263},"I am migrating my vue3 project to nuxt3, but I found that the main page at `pages/index.vue` is not the root page which also mounts when any page is active.\r\nIn my vue project, I use `app.vue` to add dynamic css variable with v-bind and classes uses them.\r\nSo how can I let them run globally in nuxt as they did in my vue project? Or should I use `app.vue` in company with `app/router.options.ts` instead of `pages/`(auto-generated router option). My vue solution is below.\r\n\r\n```css\r\n.page{\r\n --main-bg-color: v-bind('theme.list.mainColor');\r\n --second-bg-color: v-bind('theme.list.secondColor');\r\n --accent0-bg-color: v-bind('theme.list.accentColor[0]');\r\n --accent1-bg-color: v-bind('theme.list.accentColor[1]');\r\n --main-font-color: v-bind('theme.list.mainFontColor');\r\n --second-font-color: v-bind('theme.list.secondFontColor');\r\n --main-button-color: v-bind('theme.list.buttonColor');\r\n --main-button-hover-color: v-bind('theme.list.buttonHoverColor');\r\n background-color: var(--main-bg-color);\r\n}\r\n```\r\n\r\n_Originally posted by @XY-ShadowK in https://github.com/nuxt/nuxt/discussions/30677_",[3255,3256],{"name":3223,"color":3224},{"name":3257,"color":3258},"needs reproduction","FBCA04",30760,"I am migrating my vue3 project to nuxt3, but I found that the main page at `pages/index.vue` is not the root page which also mounts when any page is active.","2025-01-26T12:27:13Z","https://github.com/nuxt/nuxt/issues/30760",0.7092321,["Reactive",3265],{},["Set"],["ShallowReactive",3268],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f5VAIJZUqTKqAj0rtX59P0LG2NBKYEVg1qfQqB5ZXWX8":-1},"/nuxt/ui/3972"]