\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```",[3032,3035,3038],{"name":3033,"color":3034},"bug","d73a4a",{"name":3036,"color":3037},"v3","49DCB8",{"name":3039,"color":3040},"triage","ffffff",4530,"ui","[UInputTags, UInputMenu] Theming behaviour issues","2025-07-15T17:50:02Z","https://github.com/nuxt/ui/issues/4530",0.6874068,{"description":3048,"labels":3049,"number":3051,"owner":3023,"repository":3023,"state":3024,"title":3052,"updated_at":3053,"url":3054,"score":3055},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.9.0`\n- Nuxt Version: `3.16.0`\n- CLI Version: `3.23.0`\n- Nitro Version: `2.11.6`\n- Package Manager: `pnpm@9.5.0`\n- Builder: `-`\n- User Config: `ssr`, `devtools`, `compatibilityDate`, `css`, `app`, `modules`, `runtimeConfig`, `vite`, `vueQuery`, `ui`, `icon`, `elementPlus`\n- Runtime Modules: `@nuxt/eslint@1.2.0`, `@nuxt/icon@1.11.0`, `@nuxt/scripts@0.11.2`, `@nuxt/test-utils@3.17.2`, `@nuxt/ui@3.0.2`, `@element-plus/nuxt@1.1.1`, `@hebilicious/vue-query-nuxt@0.3.0`, `@vueuse/nuxt@13.0.0`\n- Build Modules: `-`\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/purple-worker-q927r2?workspaceId=ws_Nd6bGHokakFXXgZBfRPLsD\n\n### Describe the bug\n\n**Steps to Reproduce:**\n\n1. Open the reproduction link.\n2. Click on 'page 2' at the top to navigate to the page2 page.\n3. The loading animation will not disappear.\n\nThe code logic of the page2 page is to call the `fetchData` function when the page is opened, while setting `loading` to true and then setting it to false within a short period.\n\nThis bug is triggered when a Nuxt page uses a transition with the mode set to `out-in`. Specifically, when the component's props change rapidly, the code related to DOM operations does not correctly handle the state of the props, resulting in abnormal component display.\n\nWorkaround:\n\n1. Set the mode to a value other than `out-in`.\n2. Wrap the component using `v-loading` with a `\u003CClientOnly>` component.\n3. Call `fetchData` within the `onMounted` callback.\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```\n\nEdit: pick right words",[3050],{"name":3020,"color":3021},31613,"page transtion with fast props change","2025-04-02T03:30:33Z","https://github.com/nuxt/nuxt/issues/31613",0.6949821,{"description":3057,"labels":3058,"number":3061,"owner":3023,"repository":3042,"state":3062,"title":3063,"updated_at":3064,"url":3065,"score":3066},"### 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```",[3059,3060],{"name":3033,"color":3034},{"name":3036,"color":3037},4198,"closed","UTabs style issue","2025-05-23T13:23:24Z","https://github.com/nuxt/ui/issues/4198",0.6492323,{"description":3068,"labels":3069,"number":3073,"owner":3023,"repository":3042,"state":3062,"title":3074,"updated_at":3075,"url":3076,"score":3077},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.11.0`\n- Nuxt Version: `3.17.0`\n- CLI Version: `3.25.0`\n- Nitro Version: `2.11.11`\n- Package Manager: `pnpm@10.4.0`\n- Builder: `-`\n- User Config: `-`\n- Runtime Modules: `-`\n- Build Modules: `-`\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/modern-dust-h3lryc\n\n### Description\n\nHey, after upgrading to latest `@nuxt/ui`, custom Nuxt UI variable overrides stopped working. Looks like the correct colors are not generating.\n\nThis has worked in the previous versions:\n\n```\n:root {\n --ui-bg-elevated: var(--ui-color-neutral-500);\n}\n\nmain {\n --ui-bg-elevated: var(--color-white);\n}\n\n// Should have color --ui-color-neutral-500 with 0.5 opacity - CORRECT\n\u003Cdiv class=\"p-8 flex items-center gap-2 bg-elevated/50\">\n\u003C/div>\n\n// Should have color --color-white with 0.5 opacity - NOT WORKING - has colors from :root\n\u003Cmain class=\"p-8 flex items-center gap-2 bg-elevated/50\">\n\u003C/main>\n```\n\nCurrently, the variables in main have no effect on the sites.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3070,3071,3072],{"name":3033,"color":3034},{"name":3036,"color":3037},{"name":3039,"color":3040},4018,"Overriding root variables stopped working in 3.1.0","2025-04-29T12:40:17Z","https://github.com/nuxt/ui/issues/4018",0.68140197,{"description":3079,"labels":3080,"number":3083,"owner":3023,"repository":3042,"state":3062,"title":3084,"updated_at":3085,"url":3086,"score":3087},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.16.0\n- Nuxt Version: 3.17.5\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: bun@1.2.13\n- Builder: -\n- User Config: devtools, css, modules, runtimeConfig, compatibilityDate, i18n, auth, sourcemap\n- Runtime Modules: @nuxt/ui@3.1.3, @sidebase/nuxt-auth@0.10.1, @nuxtjs/i18n@9.5.5, @nuxt/image@1.10.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.3\n\n### Reproduction\n\nNuxt UI 3: https://codesandbox.io/p/devbox/winter-cherry-2pwhgv\nNuxt UI 2: https://stackblitz.com/edit/nuxt-ui-w6xry7tp?file=app.vue\n\n### Description\n\nI'm migrating my app from Nuxt UI 2 to 3. This is a regression in the Nuxt UI 3 version.\n\nIf this isn't possible, can we have a tooltip or something?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3081,3082],{"name":3033,"color":3034},{"name":3036,"color":3037},4300,"Select should expand to item's full width or at least allow showing it","2025-06-11T09:09:13Z","https://github.com/nuxt/ui/issues/4300",0.6843534,{"description":3089,"labels":3090,"number":3101,"owner":3023,"repository":3023,"state":3062,"title":3102,"updated_at":3103,"url":3104,"score":3105},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v18.16.0`\r\n- Nuxt Version: `3.6.5`\r\n- Nitro Version: `2.5.2`\r\n- Package Manager: `pnpm@8.6.11`\r\n- Builder: `vite`\r\n- User Config: `extends`, `telemetry`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\r\n### Reproduction\r\n\r\n### Create component in our Nuxt layer\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cbutton :class=\"[$style.root]\">\r\n \u003Cspan :class=\"$style.title\">TEST\u003C/span>\u003Cslot />\r\n \u003C/button>\r\n\u003C/template>\r\n\r\n\u003Cstyle module>\r\n.root {\r\n display: flex;\r\n background-color: black;\r\n}\r\n.title {\r\n color: rgb(51, 48, 211);\r\n}\r\n\u003C/style>\r\n```\r\n```ts\r\nexport default defineNuxtConfig({\r\n extends: [\"our-same-layer\"],\r\n});\r\n```\r\n\u003Cimg width=\"1641\" alt=\"image\" src=\"https://github.com/nuxt/nuxt/assets/52721424/37b8fd5c-40bf-40a2-9178-c7dbb6a8c2dd\">\r\n\r\n### But if we run only layer, we get the correct result\r\n\u003Cimg width=\"1643\" alt=\"image\" src=\"https://github.com/nuxt/nuxt/assets/52721424/dbfb15e0-5180-43b1-8b07-76a86bb445f4\">\r\n\r\n\r\n\r\n### Describe the bug\r\n\r\nDuplicate stylesheet in dev when using Nuxt Layer..\r\n### Additional context\r\n\r\nI tested pure css, it's reproduced on css module and pure css\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cbutton class=\"root\">\r\n \u003Cspan class=\"title\">TEST\u003C/span>\u003Cslot />\r\n \u003C/button>\r\n\u003C/template>\r\n\r\n\u003Cstyle>\r\n.root {\r\n display: flex;\r\n background-color: black;\r\n}\r\n.title {\r\n color: rgb(51, 48, 211);\r\n}\r\n\u003C/style>\r\n```\r\n\u003Cimg width=\"1642\" alt=\"image\" src=\"https://github.com/nuxt/nuxt/assets/52721424/422ddc69-a372-4255-a7a0-b33fdf99c54a\">\r\n\r\n### Logs\r\n\r\n_No response_",[3091,3094,3095,3098],{"name":3092,"color":3093},"3.x","29bc7f",{"name":3033,"color":3034},{"name":3096,"color":3097},"🔨 p3-minor","FBCA04",{"name":3099,"color":3100},"layers","006B75",22658,"Duplicate stylesheet in dev when using Nuxt Layer","2023-09-11T13:39:19Z","https://github.com/nuxt/nuxt/issues/22658",0.6861226,{"description":3107,"labels":3108,"number":3112,"owner":3023,"repository":3042,"state":3062,"title":3113,"updated_at":3114,"url":3115,"score":3116},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.11.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.25.0\n- Nitro Version: 2.11.9\n- Package Manager: npm@10.9.0\n- Builder: -\n- User Config: devtools, modules, runtimeConfig, app, css, ui, icon, i18n, future, compatibilityDate\n- Runtime Modules: @nuxt/ui@3.1.0, @nuxt/eslint@1.3.0, @nuxtjs/device@3.2.4, @nuxtjs/i18n@9.5.3, @pinia/nuxt@0.11.0, @vueuse/nuxt@13.1.0, nuxt-lodash@2.5.3\n- Build Modules: -\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/vigorous-cerf-pnrc3g\n\n// app.config.ts\nexport default defineAppConfig({\n ui: {\n colors: {\n primary: 'emerald',\n neutral: 'zinc',\n red: 'red',\n orange: 'orange',\n yellow: 'yellow',\n green: 'green',\n blue: 'blue',\n purple: 'purple',\n gray: 'gray',\n },\n }\n}\n\n// nuxt.config.ts\n\nui: {\n theme: {\n colors: [ 'primary', 'secondary', 'success', 'info', 'warning', 'error', 'red', 'orange', 'yellow', 'green', 'blue', 'purple', 'gray' ],\n },\n },\n\n### Description\n\nYesterday everything was working fine, no code was changed, after the upgrade it broke.\nFor example:\n```html\n\u003Cdiv class=\"bg-(--ui-orange)\">\n```\nOr\n```html\n\u003Cdiv class=\"bg-orange\">\n```\nBoth not work\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3109,3110,3111],{"name":3033,"color":3034},{"name":3036,"color":3037},{"name":3039,"color":3040},3977,"Extend colors not work after update to v3.1","2025-04-28T10:40:09Z","https://github.com/nuxt/ui/issues/3977",0.6861861,{"labels":3118,"number":3125,"owner":3023,"repository":3023,"state":3062,"title":3126,"updated_at":3127,"url":3128,"score":3129},[3119,3121,3122],{"name":3120,"color":3040},"stale",{"name":3020,"color":3021},{"name":3123,"color":3124},"2.x","d4c5f9",10165,"Nuxt is removing universal selectors from css","2023-01-22T15:45:12Z","https://github.com/nuxt/nuxt/issues/10165",0.6873079,{"description":3131,"labels":3132,"number":3135,"owner":3023,"repository":3023,"state":3062,"title":3136,"updated_at":3137,"url":3138,"score":3139},"### Environment\n\nNuxt Version: 3.0.0\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-hcvfnh?file=components/MainHeader.vue\n\n### Describe the bug\n\ni want to overwrite \u003CNuxtLayout name=\"header\" /> style, but it is no work\r\n\r\n``` \r\n\u003Ctemplate>\r\n \u003CNuxtLayout name=\"header\" />\r\n\u003C/template>\r\n\r\n\u003Cstyle lang=\"scss\" scoped>\r\n.header {\r\n color: black;\r\n}\r\n\u003C/style>\r\n``` \r\n\r\n\r\n\r\n\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3133,3134],{"name":3092,"color":3093},{"name":3020,"color":3021},15572,"overwrite layout component style no work ","2023-01-24T14:02:38Z","https://github.com/nuxt/nuxt/issues/15572",0.6873122,["Reactive",3141],{},["Set"],["ShallowReactive",3144],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fHxIBbnLALUkiHweuEwJFURGphWKjDKtw-gDmeM74-3M":-1},"/nuxt/ui/4156"]