\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```",[3019,3022,3025],{"name":3020,"color":3021},"bug","d73a4a",{"name":3023,"color":3024},"v3","49DCB8",{"name":3026,"color":3027},"triage","ffffff",4530,"nuxt","ui","open","[UInputTags, UInputMenu] Theming behaviour issues","2025-07-15T17:50:02Z","https://github.com/nuxt/ui/issues/4530",0.7093391,{"description":3037,"labels":3038,"number":3046,"owner":3029,"repository":3029,"state":3047,"title":3048,"updated_at":3049,"url":3050,"score":3051},"### Environment\r\n\r\n------------------------------\r\n- Operating System: `Windows_NT`\r\n- Node Version: `v16.15.0`\r\n- Nuxt Version: `3.0.0-rc.10`\r\n- Nitro Version: `0.5.3`\r\n- Package Manager: `npm@8.11.0`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\r\n- With UnoCSS and preflight activated for CSS\r\n\r\n### Reproduction\r\n\r\nSee this repo for reproduction : https://github.com/g4w3l/nuxt3rc10-unocss\r\n\r\n- If you launch the server with `npm run dev`, when you go on `/page1` you see a green button as expected\r\n- If you build it and launch it with \r\n```\r\nnpm run build\r\nnode .output/server/index.mjs\r\n```\r\nThe button on `/page1` goes transparent\r\n\r\n### Describe the bug\r\n\r\nI've put some styles on a button in a component. All works well in `dev` mode, if you inspect the `\u003Cbutton>`, the order of the styles is correct and the `bg-green` is applied : \r\n\r\n\r\nIn built version the order of the styles is inverted, thus the button is transparent : \r\n\r\n\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3039,3042,3043],{"name":3040,"color":3041},"3.x","29bc7f",{"name":3020,"color":3021},{"name":3044,"color":3045},"馃敤 p3-minor","FBCA04",14943,"closed","Nuxt RC10 - Reset inline styles take priority on built bundle","2023-01-19T17:42:57Z","https://github.com/nuxt/nuxt/issues/14943",0.664502,{"description":3053,"labels":3054,"number":3057,"owner":3029,"repository":3030,"state":3047,"title":3058,"updated_at":3059,"url":3060,"score":3061},"### Environment\n\n- node锛歏18.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```",[3055,3056],{"name":3020,"color":3021},{"name":3023,"color":3024},3047,"No style","2025-02-24T22:33:59Z","https://github.com/nuxt/ui/issues/3047",0.67229635,{"description":3063,"labels":3064,"number":3067,"owner":3029,"repository":3030,"state":3047,"title":3068,"updated_at":3069,"url":3070,"score":3071},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.12.0`\n- Nuxt Vesion: `3.17.1`\n- Nitro version: `2.11.11`\n- Package Manager: `pnpm@10.8.0`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.0\n\n### Reproduction\n\nhttps://github.com/rudrokhanpro/nuxt-ui-tailwind-in-layers-bug\n\n### Description\n\nHello!\nI have encountered a bug affecting TailwindCSS colors in Nuxt Layers.\nI have attached a repo that mimics a project I'm working on.\n\nThere is a first root Nuxt app with NuxtUI called `zero`.\nThere is also a second Nuxt app that `extends: [\"../zero\"]`.\nFinally, there is a third and last Nuxt app that `extends: [\"../one\"]`.\n\nIf we run the `one` project, we can access [`/one`](http://localhost:3000/one), a page that displays components both from the `zero` and `one` projects. \nIf we run the `two` project, we can access [`/two`](http://localhost:3000/two), a page that displays components both from the `zero`, `one` and `two` projects.\n\nYou will notice that the page seems \"empty\" but in reality there are button whose styles are not being set correctly. It seems that it only affects colors because if we inspect the elements we can see that the padding and some hover styles are being applied correctly.\n\n\n\nTo fix this issue, I had to safelist all colors in the root project:\n\n```css\n/* assets/css/main.css */\n@source inline(\"{hover:,disabled:,focus:,}bg-{red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose,slate,gray,zinc,neutral,stone}-{50,{100..900..100},950}\");\n```\n\nAnd we get the following result:\n\n\n\n### Additional context\n\nI have been migrating and updating my project to Nuxt UI v3 since it was in alpha and it has been a great experience thanks to the contributors of this repository. \n\nThis bug was introduced with Tailwind v4.0.8. I checked every single release and it seems related to the TailwindCSS import and `@theme static {}`\n\n### Logs\n\n```shell-script\n\n```",[3065,3066],{"name":3020,"color":3021},{"name":3023,"color":3024},4049,"Tailwind colors not working in Nuxt Layers","2025-05-19T10:29:55Z","https://github.com/nuxt/ui/issues/4049",0.6751311,{"description":3073,"labels":3074,"number":3083,"owner":3029,"repository":3030,"state":3047,"title":3084,"updated_at":3085,"url":3086,"score":3087},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.14.0\n- Nuxt Version: 3.16.0\n- CLI Version: 3.22.5\n- Nitro Version: 2.11.6\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: devtools, modules, components, css, compatibilityDate\n- Runtime Modules: @nuxt/ui@3.0.0, @pinia/nuxt@0.10.1, compodium@0.1.0-beta.5\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0\n\n### Reproduction\n\n```vue\n\u003CUCard variant=\"subtle\">\n \u003CUTable \n :data=\"data\"\n :columns=\"columns\"\n />\n\u003C/UCard>\n```\n\n### Description\n\nIf using a UTable component on a background that isn't the default neutral color the bg-color of the thead is visible.\n\n\n\n\n\n_A little bit easier to see with white Background_\n\n\n\n\nMaybe this is a wanted behavior. So if so please ignore and close the issue.\nI know sometimes you want a background color in the headlines. But sometimes you don't want them.\nAnyways if this is a wanted behavior, then maybe this issue will help those who don't want a background color and are looking for a solution.\n\n### Additional context\n\nCould be fixed by adding:\n```vue\n:ui=\"{\n thead: 'bg-unset'\n}\"\n```\nto the `\u003CUTable>` tag\n\n\n\n### Logs\n\n```shell-script\n-\n```",[3075,3076,3077,3078,3081],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3026,"color":3027},{"name":3079,"color":3080},"closed-by-bot","ededed",{"name":3082,"color":3080},"stale",3607,"Background-Color for UTable","2025-06-18T09:01:26Z","https://github.com/nuxt/ui/issues/3607",0.6865791,{"description":3089,"labels":3090,"number":3094,"owner":3029,"repository":3030,"state":3047,"title":3095,"updated_at":3096,"url":3097,"score":3098},"### 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```",[3091,3092,3093],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3026,"color":3027},3977,"Extend colors not work after update to v3.1","2025-04-28T10:40:09Z","https://github.com/nuxt/ui/issues/3977",0.6866685,{"description":3100,"labels":3101,"number":3106,"owner":3029,"repository":3030,"state":3047,"title":3107,"updated_at":3108,"url":3109,"score":3110},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.9.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.8.3\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.19.2, nuxt-svgo@4.0.9, @pinia/nuxt@0.9.0, pinia-plugin-persistedstate/nuxt, @nuxtjs/i18n@9.1.0, nuxt-jsonld@2.1.0, @nuxtjs/robots@5.0.0, nuxt-gtag@3.0.2, @sentry/nuxt/module@8.42.0, nuxt-time@1.0.3, @nuxt/eslint@0.7.2\n- Build Modules: -\n\n\n### Version\n\nv2.19.2\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-ncxoznzw\n\n### Description\n\nIf you define your own color for tailwinds, and attempt to use it on a UButton component with the link variant, it will not work and give the following error:\n\n```\n500\nvariant?.replaceAll is not a function\n\nat ComputedRefImpl.fn (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@nuxt+ui@2.19.2_vite@6.0.3_vue@3.5.13/node_modules/@nuxt/ui/dist/runtime/components/elements/Button.js:142:18)\nat refreshComputed (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:353:29)\nat get value (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:1558:5)\nat unref (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:1431:29)\nat Object.get (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:1437:64)\nat Object.get (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:3099:26)\nat Proxy._sfc_render (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@nuxt+ui@2.19.2_vite@6.0.3_vue@3.5.13/node_modules/@nuxt/ui/dist/runtime/components/elements/Button.js:199:17)\nat renderComponentRoot (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:6521:16)\nat hydrateSubTree (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:5309:32)\nat ReactiveEffect.componentUpdateFn [as fn] (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:5334:13)\n```\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3102,3103,3104,3105],{"name":3020,"color":3021},{"name":3026,"color":3027},{"name":3079,"color":3080},{"name":3082,"color":3080},2860,"[UButton] Using a custom color on the link variant causes an error","2025-06-18T09:05:19Z","https://github.com/nuxt/ui/issues/2860",0.6925992,{"labels":3112,"number":3119,"owner":3029,"repository":3029,"state":3047,"title":3120,"updated_at":3121,"url":3122,"score":3123},[3113,3116],{"name":3114,"color":3115},"pending triage","E99695",{"name":3117,"color":3118},"2.x","d4c5f9",4204,"Inconsistent css in dev vs prod","2024-08-03T20:53:43Z","https://github.com/nuxt/nuxt/issues/4204",0.69812864,{"description":3125,"labels":3126,"number":3133,"owner":3029,"repository":3029,"state":3047,"title":3134,"updated_at":3135,"url":3136,"score":3137},"### 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_",[3127,3128,3129,3130],{"name":3040,"color":3041},{"name":3020,"color":3021},{"name":3044,"color":3045},{"name":3131,"color":3132},"layers","006B75",22658,"Duplicate stylesheet in dev when using Nuxt Layer","2023-09-11T13:39:19Z","https://github.com/nuxt/nuxt/issues/22658",0.69849235,{"description":3139,"labels":3140,"number":3145,"owner":3029,"repository":3030,"state":3047,"title":3146,"updated_at":3147,"url":3148,"score":3149},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.12.0\n- Nuxt Version: 3.15.4\n- CLI Version: 3.21.1\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.15.2\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.0.0-alpha.12\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/bug-report-ubutton-8st7kw\n\n### Description\n\nWhen I throw an error within the click event of `UButton`, the `NuxtErrorBoundary` component does not catch the error as expected. However, if I use a standard `\u003Cbutton>` tag instead of `UButton`, the error is caught correctly by the NuxtErrorBoundary.\n\n### Additional context\n\n\n\n\n### Logs\n\n```shell-script\n\n```",[3141,3142,3143,3144],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3079,"color":3080},{"name":3082,"color":3080},3237,"[UButton] is not working with NuxtErrorBoundary","2025-06-18T09:02:19Z","https://github.com/nuxt/ui/issues/3237",0.6993046,["Reactive",3151],{},["Set"],["ShallowReactive",3154],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fI8rT9AqfVIAuzHahaY7mGZrO43AVSLE_hp4jpLFMG2A":-1},"/nuxt/ui/3863"]