\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```",[3170,3171,3172],{"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.6705638,{"description":3179,"labels":3180,"number":3183,"owner":3149,"repository":3150,"state":3151,"title":3184,"updated_at":3185,"url":3186,"score":3187},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v23.11.0\n- Nuxt Version: 4.0.3\n- CLI Version: 3.28.0\n- Nitro Version: 2.12.4\n- Package Manager: pnpm@9.15.2\n- Builder: -\n- User Config: modules, $development, devtools, css, router, colorMode, ui, runtimeConfig, routeRules, devServer, experimental, compatibilityDate, typescript, eslint, fonts, security\n- Runtime Modules: @nuxt/ui@3.3.3, @pinia/nuxt@0.11.2, nuxt-security@2.3.0, @nuxt/content@3.6.3, @nuxtjs/leaflet@1.3.2, @nuxt/image@1.11.0, @vueuse/nuxt@13.7.0, @yuta-inoue-ph/nuxt-vcalendar@1.1.0, @nuxt/scripts@0.11.10, @nuxt/eslint@1.9.0\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Package\n\nv3.x\n\n### Version\n\nv3.3.3\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/quizzical-keldysh-wtw7zm\n\n### Description\n\nUsing Nuxt UI 3, I'm having issues styling a custom variant in a specific color. \n\nDefining the custom variant in the button.variants.variant works as expected, and intellisense recognizes the variant elsewhere in the project. Once I attempt to define a compoundVariant that includes the custom variant, intellisense breaks and the project no longer builds, as it appears the compoundVariants object is expecting the fixed list of variants specified in the base button. \n\nExample config:\n```\nexport default defineAppConfig({\n ui: {\n colors: {\n primary: \"green\",\n neutral: \"slate\",\n },\n button: {\n variants: {\n variant: {\n custom: {\n label: \"uppercase\",\n },\n },\n },\n compoundVariants: [{\n variant: 'custom'\n color: 'secondary',\n class: 'text-fuschia-500'\n }],\n },\n },\n});\n```\nError: \n`Type '\"custom\"' is not assignable to type '\"link\" | \"solid\" | \"outline\" | \"soft\" | \"subtle\" | \"ghost\" | (\"link\" | \"solid\" | \"outline\" | \"soft\" | \"subtle\" | \"ghost\")[] | undefined'.`\n\n### Additional context\n\nnote, this is a dupe of https://github.com/nuxt/ui/issues/4046 - feel free to close this and reopen the original if that is better.\n\n### Logs\n\n```shell-script\n\n```",[3181,3182],{"name":3140,"color":3141},{"name":3146,"color":3147},4888,"Custom Variant and `compoundVariants` typing issue","2025-09-03T17:02:45Z","https://github.com/nuxt/ui/issues/4888",0.6761577,{"description":3189,"labels":3190,"number":3195,"owner":3149,"repository":3150,"state":3151,"title":3196,"updated_at":3197,"url":3198,"score":3199},"### Description\n\nNuxt ui is not picking up my new primary color variables defined in main.css it was woking until I set ssr false.",[3191,3194],{"name":3192,"color":3193},"question","d876e3",{"name":3143,"color":3144},4433,"Nuxt ui not picking up correct variable overrides in ssr false","2025-07-01T10:46:02Z","https://github.com/nuxt/ui/issues/4433",0.68324804,{"description":3201,"labels":3202,"number":3206,"owner":3149,"repository":3150,"state":3207,"title":3208,"updated_at":3209,"url":3210,"score":3211},"### 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```",[3203,3204,3205],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3146,"color":3147},3977,"closed","Extend colors not work after update to v3.1","2025-04-28T10:40:09Z","https://github.com/nuxt/ui/issues/3977",0.62751585,{"description":3213,"labels":3214,"number":3221,"owner":3149,"repository":3149,"state":3207,"title":3222,"updated_at":3223,"url":3224,"score":3225},"### Environment\r\n\r\nWorking directory: /home/andrey/Documents/nuxt-env-test 4:42:45 PM\r\nNuxt project info: 4:42:45 PM\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v20.11.0\r\n- Nuxt Version: 3.11.1\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.5\r\n- Package Manager: pnpm@8.15.5\r\n- Builder: -\r\n- User Config: devtools, runtimeConfig\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://github.com/4dr1en/repro-nuxt-dynamic-env\r\n\r\nThe .env is included in the repo.\r\n> pnpm run dev\r\n\r\nand\r\n\r\n> pnpm preview\r\n\r\nwork\r\n\r\n> source .env && node .output/server/index.mjs\r\n\r\ndo not\r\n\r\n### Describe the bug\r\n\r\nWhen I follow the official documentation:\r\nhttps://nuxt.com/docs/guide/going-further/runtime-config#example\r\n\r\nThe public runtimeConfig is being replaced by the environements variables in developpement and when doing `pnpm preview`.\r\nBut when the nuxt application is started doing `source .env && node .output/server/index.mjs`, the public runtime configuration is left empty.\r\n\r\n\r\n\r\n### Additional context\r\n\r\nI need to update the runtimeConfiguration using the env variables without rebuilding the app, I tried to follow th official [documentation](https://nuxt.com/docs/guide/going-further/runtime-config#example) but it doesn't work in production.\r\n\r\n.env content\r\n```env\r\nNUXT_PUBLIC_MSG=\"Hello world!\"\r\n```\r\n\r\nnuxt.config.ts\r\n```typescript\r\nexport default defineNuxtConfig({\r\n devtools: { enabled: true },\r\n runtimeConfig: {\r\n public: {\r\n msg: ''\r\n }\r\n }\r\n})\r\n```\r\n\r\napp.vue\r\n```typescript\r\n\u003Cscript lang=\"ts\">\r\n export default defineNuxtComponent({\r\n mounted() {\r\n console.log(this.$config.public.msg)\r\n }\r\n })\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n {{ $config.public.msg }}\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n### Logs\r\ncli\r\n```shell-script\r\n❯ source .env && echo $NUXT_PUBLIC_MSG\r\nHello world!\r\n❯ source .env && node .output/server/index.mjs\r\nListening on http://[::]:3000\r\n```\r\n\r\nbrowser console\r\n```javascript\r\n\u003Cempty string> Mc_nPuuN.js:23:55632\r\n```\r\n\r\nThis is working with `pnpm preview` :\r\n\r\ncli\r\n```shell-script\r\n❯ pnpm preview\r\n\r\n> nuxt-app@ preview /home/andrey/Documents/nuxt-env-test\r\n> nuxt preview\r\n\r\n 5:06:53 PM\r\n ╭────────────────────────────────────────Preview Mode──────────────────────────────────────────╮\r\n │ │\r\n │ You are running Nuxt production build in preview mode. │\r\n │ For production deployments, please directly use node ./server/index.mjs command. │\r\n │ │\r\n │ Node.js: v20.11.0 │\r\n │ Nitro Preset: node-server │\r\n │ Working directory: .output │\r\n │ │\r\n ╰──────────────────────────────────────────────────────────────────────────────────────────────╯\r\n\r\nℹ Loading .env. This will not be loaded when running the server in production. 5:06:53 PM\r\nℹ Starting preview command: node ./server/index.mjs 5:06:53 PM\r\n 5:06:53 PM\r\nListening on http://[::]:3000\r\n```\r\n\r\nbrowser console\r\n```javascript\r\nHello world! [Mc_nPuuN.js:23:55632](http://[::]:3000/_nuxt/Mc_nPuuN.js)\r\n```",[3215,3218],{"name":3216,"color":3217},"3.x","29bc7f",{"name":3219,"color":3220},"pending triage","E99695",26520,"NUXT_PUBLIC_XXX environment variables not overriding public runtimeConfig in production","2024-03-27T16:27:15Z","https://github.com/nuxt/nuxt/issues/26520",0.67197794,{"description":3227,"labels":3228,"number":3232,"owner":3149,"repository":3150,"state":3207,"title":3233,"updated_at":3234,"url":3235,"score":3236},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.3.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.25.0\n- Nitro Version: 2.11.9\n- Package Manager: pnpm@9.15.4\n- Builder: -\n- User Config: compatibilityDate, devtools, modules, future, css, runtimeConfig\n- Runtime Modules: @nuxt/ui@3.1.0, @nuxt/image@1.10.0, nuxt-auth-utils@0.5.20, nuxt-svgo@4.0.17\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\n/* main.css */\n@import \"tailwindcss\" theme(static);\n@import \"@nuxt/ui\";\n\n### Description\n\nWhen using the css above, the neutral color (eg. --color-neutral-50, --color-neutral-100, etc ) tailwind variables are missing in the output css file (in :root, :host {} )\nThey are there when not importing @nuxt/ui\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3229,3230,3231],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3146,"color":3147},3986,"tailwindcss neutral color missing","2025-05-02T09:58:19Z","https://github.com/nuxt/ui/issues/3986",0.67297304,{"description":3238,"labels":3239,"number":3243,"owner":3149,"repository":3150,"state":3207,"title":3244,"updated_at":3245,"url":3246,"score":3247},"### 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```",[3240,3241,3242],{"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.6735535,{"description":3249,"labels":3250,"number":3254,"owner":3149,"repository":3150,"state":3207,"title":3255,"updated_at":3256,"url":3257,"score":3258},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v22.13.1\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: hooks, app, runtimeConfig, supabase, routeRules, sitemap, site, compatibilityDate, devtools, modules, css, ui\n- Runtime Modules: @nuxt/ui@3.1.2, @pinia/nuxt@0.11.0, @nuxtjs/supabase@1.5.1, @nuxtjs/seo@3.0.3, @storyblok/nuxt@6.2.4\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.2\n\n### Reproduction\n\nchange the border color(I assume should be this variable: --ui-border) in your project to red or blue and check if this color is applied when using only the classes: `border` or `border-b` without specifying the color.\n\n### Description\n\nI want to set the default border color, by default is very dark.\n\nI found that `--ui-border` variable is not used in the border style, maybe I could be wrong.\n\n\u003Cimg width=\"374\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7f25806c-f5ea-43a1-a2a3-095d71448d43\" />\n\nthis is how the borders are styled in my case, no `--ui-border`\n\n\u003Cimg width=\"542\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/6bb3138e-36e5-46cb-9930-92b608811fe0\" />\n\n\u003Cimg width=\"515\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/16ad3bc6-a8a9-4391-a0c5-542ff3f58121\" />\n\nplease help, \n\nthank you\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3251,3252,3253],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3146,"color":3147},4218,"Can't set the default border color","2025-05-26T08:34:37Z","https://github.com/nuxt/ui/issues/4218",0.6751139,["Reactive",3260],{},["Set"],["ShallowReactive",3263],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f3YChNcCa9-57pSAxN_65ikYkluTZ9QAeco7gJEEKLII":-1},"/nuxt/ui/4018"]