` component.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n[Vue warn]: Invalid prop: custom validator check failed for prop \"color\". \n at \u003CProgress key=1 color=\"neutral\" size=\"xl\" ... > \n```",[2852,2855],{"name":2853,"color":2854},"bug","d73a4a",{"name":2856,"color":2857},"triage","ffffff",3407,"nuxt","ui","open","UProgress missing color type","2025-03-02T15:30:03Z","https://github.com/nuxt/ui/issues/3407",0.725169,{"description":2867,"labels":2868,"number":2878,"owner":2859,"repository":2859,"state":2879,"title":2880,"updated_at":2881,"url":2882,"score":2883},"### Describe the feature\r\n\r\nWhile debugging my app, I noticed that errors displayed alongside a 500 page were black on a black background, making the errors unreadable. After I inspected the element I realised I was actually setting a color for paragraphs in my own CSS and that Nuxt's own stylesheet was not setting the color on the paragraph but on the parent div via the `text-black` class.\r\n\r\nI believe it would be best if Nuxt's colors were applied on a more granular level (so on P or any text elements directly) to avoid this edge case.\r\n\r\n\u003Cimg width=\"806\" alt=\"Screenshot 2024-04-21 at 12 52 12\" src=\"https://github.com/nuxt/nuxt/assets/2543201/47feb2cd-4405-4e1f-afc5-9da68fef62ff\">\r\n\u003Cimg width=\"431\" alt=\"Screenshot 2024-04-21 at 12 52 39\" src=\"https://github.com/nuxt/nuxt/assets/2543201/519a57d3-296d-4f3e-b0a9-a47df8fa3fe3\">\r\n\u003Cimg width=\"436\" alt=\"Screenshot 2024-04-21 at 13 12 50\" src=\"https://github.com/nuxt/nuxt/assets/2543201/2a6724a6-6171-4624-8acc-1cdee912712f\">\r\n\u003Cimg width=\"444\" alt=\"Screenshot 2024-04-21 at 13 12 56\" src=\"https://github.com/nuxt/nuxt/assets/2543201/7aa0dc99-b7c4-473e-b0e3-9bfd1f6f986a\">\r\n\u003Cimg width=\"241\" alt=\"Screenshot 2024-04-21 at 13 13 01\" src=\"https://github.com/nuxt/nuxt/assets/2543201/0a44cd39-79d7-498a-a8d5-b641750ce2e5\">\r\n\u003Cimg width=\"239\" alt=\"Screenshot 2024-04-21 at 13 13 12\" src=\"https://github.com/nuxt/nuxt/assets/2543201/ad646824-10fe-451d-bc7c-2789550fa450\">\r\n\r\n\r\n\r\n\r\n### Additional information\r\n\r\n- [ ] Would you be willing to help implement this feature?\r\n- [ ] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2869,2872,2875],{"name":2870,"color":2871},"3.x","29bc7f",{"name":2873,"color":2874},"pending triage","E99695",{"name":2876,"color":2877},"ui-templates","bfd4f2",27082,"closed","Add a color to \u003Cp> elements on Nuxt error pages","2024-05-24T16:39:43Z","https://github.com/nuxt/nuxt/issues/27082",0.6931728,{"labels":2885,"number":2890,"owner":2859,"repository":2859,"state":2879,"title":2891,"updated_at":2892,"url":2893,"score":2894},[2886,2887],{"name":2873,"color":2874},{"name":2888,"color":2889},"2.x","d4c5f9",10114,"Custom directives didn't recognized by Nuxt v3","2023-01-22T15:45:12Z","https://github.com/nuxt/nuxt/issues/10114",0.7005133,{"description":2896,"labels":2897,"number":2902,"owner":2859,"repository":2860,"state":2879,"title":2903,"updated_at":2904,"url":2905,"score":2906},"### 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```",[2898,2899],{"name":2853,"color":2854},{"name":2900,"color":2901},"v3","49DCB8",4198,"UTabs style issue","2025-05-23T13:23:24Z","https://github.com/nuxt/ui/issues/4198",0.70493865,{"description":2908,"labels":2909,"number":2918,"owner":2859,"repository":2859,"state":2879,"title":2919,"updated_at":2920,"url":2921,"score":2922},"### 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_",[2910,2911,2912,2915],{"name":2870,"color":2871},{"name":2853,"color":2854},{"name":2913,"color":2914},"🔨 p3-minor","FBCA04",{"name":2916,"color":2917},"layers","006B75",22658,"Duplicate stylesheet in dev when using Nuxt Layer","2023-09-11T13:39:19Z","https://github.com/nuxt/nuxt/issues/22658",0.7173575,{"description":2924,"labels":2925,"number":2929,"owner":2859,"repository":2860,"state":2879,"title":2930,"updated_at":2931,"url":2932,"score":2933},"### Environment\n\nWindows 11,\nNode v20.19.0\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.12\n\n### Reproduction\n\ntabs: {\n slots: {\n root: 'flex items-center gap-2',\n list: 'relative **flex-none** p-1 px-0 group',\n indicator: 'absolute transition-[translate,width] duration-200',\n trigger: [\n 'group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75',\n 'transition-colors'\n ],\n content: 'focus:outline-none w-full',\n leadingIcon: 'shrink-0',\n leadingAvatar: 'shrink-0',\n leadingAvatarSize: '',\n label: 'truncate'\n },\n\n### Description\n\nFor me it's working great with Nuxt UI to overwrite \"normal\" styles in the app.config.ts, but if I try to overwrite the component standard flex with flex-none it's not working, it is still flex. Any ideas how to solve or is it a bug?\n\nThanks\n\nChristoph \n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2926,2927,2928],{"name":2853,"color":2854},{"name":2900,"color":2901},{"name":2856,"color":2857},4156,"UTabs cannot overwrite flex to flex-none","2025-05-15T15:32:49Z","https://github.com/nuxt/ui/issues/4156",0.71835995,{"labels":2935,"number":2940,"owner":2859,"repository":2859,"state":2879,"title":2941,"updated_at":2942,"url":2943,"score":2944},[2936,2938,2939],{"name":2937,"color":2857},"stale",{"name":2873,"color":2874},{"name":2888,"color":2889},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.71901315,{"description":2946,"labels":2947,"number":2951,"owner":2859,"repository":2860,"state":2879,"title":2952,"updated_at":2953,"url":2954,"score":2955},"### 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```",[2948,2949,2950],{"name":2853,"color":2854},{"name":2900,"color":2901},{"name":2856,"color":2857},3977,"Extend colors not work after update to v3.1","2025-04-28T10:40:09Z","https://github.com/nuxt/ui/issues/3977",0.72149146,{"description":2957,"labels":2958,"number":2963,"owner":2859,"repository":2859,"state":2879,"title":2964,"updated_at":2965,"url":2966,"score":2967},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v18.12.1\r\n- Nuxt Version: 3.6.2\r\n- Nitro Version: 2.6.2\r\n- Package Manager: pnpm@8.6.0\r\n- Builder: vite\r\n- User Config: sourcemap, runtimeConfig, typescript, css, build, vite, nitro, routeRules, modules, i18n, intercom, webVitals, gtm, devtools\r\n- Runtime Modules: @nuxt/image@1.0.0-rc.1, unplugin-icons/nuxt, nuxt-3-intercom@1.0.8, @nuxtjs/fontaine@0.4.1, @nuxtjs/web-vitals@0.2.6, @vueuse/nuxt@10.2.1, nuxt-vuetify-nested-containment@0.0.4, @zadigetvoltaire/nuxt-gtm@0.0.13, nuxt-vuetify-error-handler@1.1.0, (), @pinia/nuxt@0.4.11, nuxt-i18n-data@0.1.22, @nuxtjs/i18n@8.0.0-beta.12\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-wudebh?file=app.vue,plugins%2Fvuetify.ts,nuxt.config.ts,package.json\r\n\r\n### Describe the bug\r\n\r\nSince I updated to nuxt 3.7.0 the text color in every input is white. It's may a combination with vuetify but even when I rollback vuetify to 3.3.8 the input color is still white.\r\n\r\nI rolled back nuxt to 3.6.2 and vuetify to 3.3.8 and the input color is black again\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2959,2960],{"name":2870,"color":2871},{"name":2961,"color":2962},"upstream","E8A36D",22944,"Nuxt 3.7.0 - input text color is white","2023-09-04T11:53:52Z","https://github.com/nuxt/nuxt/issues/22944",0.7229934,{"description":2969,"labels":2970,"number":2973,"owner":2859,"repository":2860,"state":2879,"title":2974,"updated_at":2975,"url":2976,"score":2977},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.4.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.14.2\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.9, nuxt-auth-sanctum@0.5.2, @vueuse/nuxt@11.3.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.14.1592\n\n### Reproduction\n\n```vue\n\u003Cscript setup lang=\"ts\"\nconst placeItems = ref([{ id: 1, name: 'Place 1' }, { id: 2, name: 'Place 2' }])\n\u003C/script>\n\n\u003Ctemplate>\n\u003CUInputMenu :items=\"placeItems\"\n value-key=\"id\"\n label-key=\"name\"\n class=\"w-full mb-4\"\n multiple />\n\n\u003CUInputMenu :items=\"placeItems\"\n value-key=\"id\"\n label-key=\"name\"\n class=\"w-full\"/>\n\u003C/template>\n```\n\n### Description\nIn my opinion, the border, when focusing, should have the same color as when the parameter is absent `multiple`.\nWith white border looks bad :D\nhttps://skr.sh/vSqjqLYGgHO",[2971,2972],{"name":2853,"color":2854},{"name":2900,"color":2901},2742,"UInputMenu has wrong border when focused in multiple mode","2024-12-05T13:48:56Z","https://github.com/nuxt/ui/issues/2742",0.7235405,["Reactive",2979],{},["Set"],["ShallowReactive",2982],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fkPVcjN6oa2nI4ey0fVef6QAebK3GkbTUImreSgV9kLM":-1},"/nuxt/ui/1593"]