\n\u003C/template>\n```\nit gives me error but the color is appearing\n\nwhat possibly wrong with my setup?",[3139,3142],{"name":3140,"color":3141},"question","d876e3",{"name":3143,"color":3144},"needs reproduction","CB47CF",2984,"nuxt","ui","closed","Error when adding colors key into ui object inside app.config.ts","2025-03-28T17:36:32Z","https://github.com/nuxt/ui/issues/2984",0.6571569,{"description":3154,"labels":3155,"number":3160,"owner":3146,"repository":3147,"state":3148,"title":3161,"updated_at":3162,"url":3163,"score":3164},"### Description\n\nI recently discovered that my custom color palettes were not being used by NuxtUi.\n\nI know there is an issue with `neutral` naming https://github.com/nuxt/ui/issues/3986 but I tried with different variable name (like slate for testing purpose) but everytime NuxtUi use the default Tailwind colors and not my overrided palette.\n\nI don't know if it's a bug or a configuration issue.\n\n```css\n@import 'tailwindcss';\n@import '@nuxt/ui';\n\n@theme {\n --color-neutral-50: #f6f6f6;\n --color-neutral-100: #e7e7e7;\n --color-neutral-200: #d1d1d1;\n --color-neutral-300: #b0b0b0;\n --color-neutral-400: #888888;\n --color-neutral-500: #6d6d6d;\n --color-neutral-600: #5d5d5d;\n --color-neutral-700: #4f4f4f;\n --color-neutral-800: #454545;\n --color-neutral-900: #3d3d3d;\n --color-neutral-950: #121212;\n}\n```\n```ts\nexport default defineAppConfig({\n ui: {\n colors: {\n // DEFAULT\n primary: 'emerald', // default: green\n secondary: 'blue',\n success: 'green',\n info: 'blue',\n warning: 'yellow',\n error: 'red',\n neutral: 'neutral', // default: slate\n // CUSTOM\n alert: 'amber',\n },\n },\n});\n```\n\nNuxi info output :\n```\n- Operating System: Linux\n- Node Version: v22.14.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.11\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: devtools, typescript, css, compatibilityDate, devServer, vite, runtimeConfig, app, ui, scripts, modules, sentry, sourcemap\n- Runtime Modules: @nuxt/ui@3.0.1, @pinia/nuxt@0.11.0, pinia-plugin-persistedstate/nuxt@4.3.0, @sentry/nuxt/module@9.18.0, @nuxt/scripts@0.11.6, @nuxt/eslint@1.3.1\n- Build Modules: -\n```",[3156,3157],{"name":3140,"color":3141},{"name":3158,"color":3159},"v3","49DCB8",4144,"How to use overrided tailwind colors","2025-05-13T14:46:54Z","https://github.com/nuxt/ui/issues/4144",0.6611754,{"description":3166,"labels":3167,"number":3174,"owner":3146,"repository":3147,"state":3148,"title":3175,"updated_at":3176,"url":3177,"score":3178},"### Description\n\n**nuxt ui** incorrectly assumes tailwind colours are literal values and passes through `\u003Calpha-value>` when generating its `--color-primary-N` variables.\nit also forces particular shades (400 and 500) as `DEFAULT`, how can I disable this _feature_?\n\n```html\n \u003Cstyle id=\"nuxt-ui-colors\">\n :root {\n --color-primary-50: rgb(var(--md-primary-50) / \u003Calpha-value>);\n --color-primary-100: rgb(var(--md-primary-100) / \u003Calpha-value>);\n --color-primary-200: rgb(var(--md-primary-200) / \u003Calpha-value>);\n --color-primary-300: rgb(var(--md-primary-300) / \u003Calpha-value>);\n --color-primary-400: rgb(var(--md-primary-400) / \u003Calpha-value>);\n --color-primary-500: rgb(var(--md-primary-500) / \u003Calpha-value>);\n --color-primary-600: rgb(var(--md-primary-600) / \u003Calpha-value>);\n --color-primary-700: rgb(var(--md-primary-700) / \u003Calpha-value>);\n --color-primary-800: rgb(var(--md-primary-800) / \u003Calpha-value>);\n --color-primary-900: rgb(var(--md-primary-900) / \u003Calpha-value>);\n --color-primary-950: rgb(var(--md-primary-950) / \u003Calpha-value>);\n --color-primary-DEFAULT: rgb(var(--md-primary) / \u003Calpha-value>);\n --color-primary-DEFAULT: var(--color-primary-500);\n --color-gray-50: rgb(var(--md-neutral-50) / \u003Calpha-value>);\n --color-gray-100: rgb(var(--md-neutral-100) / \u003Calpha-value>);\n --color-gray-200: rgb(var(--md-neutral-200) / \u003Calpha-value>);\n --color-gray-300: rgb(var(--md-neutral-300) / \u003Calpha-value>);\n --color-gray-400: rgb(var(--md-neutral-400) / \u003Calpha-value>);\n --color-gray-500: rgb(var(--md-neutral-500) / \u003Calpha-value>);\n --color-gray-600: rgb(var(--md-neutral-600) / \u003Calpha-value>);\n --color-gray-700: rgb(var(--md-neutral-700) / \u003Calpha-value>);\n --color-gray-800: rgb(var(--md-neutral-800) / \u003Calpha-value>);\n --color-gray-900: rgb(var(--md-neutral-900) / \u003Calpha-value>);\n --color-gray-950: rgb(var(--md-neutral-950) / \u003Calpha-value>);\n --color-gray-DEFAULT: rgb(var(--md-neutral) / \u003Calpha-value>);\n }\n\n .dark {\n --color-primary-DEFAULT: var(--color-primary-400);\n }\n \u003C/style>\n \u003Cstyle id=\"nuxt-ui-variables\">\n :root {\n --header-height: 4rem;\n --ui-background: var(--md-surface);\n --ui-foreground: var(--md-on-surface);\n }\n\n .dark {\n --ui-background: var(--md-surface);\n --ui-foreground: var(--md-on-surface);\n }\n \u003C/style>\n```",[3168,3169,3172],{"name":3140,"color":3141},{"name":3170,"color":3171},"closed-by-bot","ededed",{"name":3173,"color":3171},"stale",3025,"`--color-primary-N` vs tailwind colors via variables","2025-06-18T09:02:42Z","https://github.com/nuxt/ui/issues/3025",0.702993,{"description":3180,"labels":3181,"number":3184,"owner":3146,"repository":3147,"state":3148,"title":3185,"updated_at":3186,"url":3187,"score":3188},"### Description\n\nBefore v3.1 I was able to use non-custom color names such as `green`, `red`, `cyan` on the `color` prop of all applicable components, for example:\n\n`\u003CUButton label=\"test\" color=\"red\" />` would render this:\n\n\n\nI achieved this by adding the color names on both `app.config.ts` and `nuxt.config.ts`:\n\n```js\nexport default defineAppConfig({\n ui: {\n colors: {\n primary: 'green',\n neutral: 'zinc',\n red: 'red',\n }\n }\n})\n```\n```js\n...\n ui: {\n theme: {\n colors: [\n 'red'\n ]\n }\n },\n...\n```\nBut after 3.1 the same setup renders the buttom like this (I had to highlight the text):\n\n\n\nI can use custom names like `new` or `tertiary` as color name, and that would work, but I still have use cases for the previous mechanism, what's the new approach for this?\n",[3182,3183],{"name":3140,"color":3141},{"name":3158,"color":3159},4035,"How to use normal color names such as red or green after v3.1","2025-05-01T22:14:49Z","https://github.com/nuxt/ui/issues/4035",0.7149216,{"labels":3190,"number":3203,"owner":3146,"repository":3146,"state":3148,"title":3204,"updated_at":3205,"url":3206,"score":3207},[3191,3194,3197,3200],{"name":3192,"color":3193},"enhancement","8DEF37",{"name":3195,"color":3196},"discussion","538de2",{"name":3198,"color":3199},"3.x","29bc7f",{"name":3201,"color":3202},"🍰 p2-nice-to-have","0E8A16",14329,"Config alias `theme` to `extends`","2023-01-19T17:33:54Z","https://github.com/nuxt/nuxt/issues/14329",0.7155616,{"description":3209,"labels":3210,"number":3218,"owner":3146,"repository":3147,"state":3148,"title":3219,"updated_at":3220,"url":3221,"score":3222},"### 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```",[3211,3214,3215],{"name":3212,"color":3213},"bug","d73a4a",{"name":3158,"color":3159},{"name":3216,"color":3217},"triage","ffffff",3986,"tailwindcss neutral color missing","2025-05-02T09:58:19Z","https://github.com/nuxt/ui/issues/3986",0.7179504,{"labels":3224,"number":3229,"owner":3146,"repository":3146,"state":3148,"title":3230,"updated_at":3231,"url":3232,"score":3233},[3225,3226],{"name":3198,"color":3199},{"name":3227,"color":3228},"pending triage","E99695",13385,"Cannot use Tailwindcss classes from composables","2023-01-19T16:54:19Z","https://github.com/nuxt/nuxt/issues/13385",0.72177774,{"description":3235,"labels":3236,"number":3241,"owner":3146,"repository":3146,"state":3148,"title":3242,"updated_at":3243,"url":3244,"score":3245},"### Environment\r\n\r\n```\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.20.3\r\n- Nuxt Version: 3.12.4\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: compatibilityDate, devtools, modules\r\n- Runtime Modules: @nuxtjs/color-mode@3.4.2\r\n- Build Modules: -\r\n------------------------------\r\n```\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-ycyewb?file=app.vue\r\n\r\n### Describe the bug\r\n\r\nI set 3 different `theme-color` meta tags using `useHead` in `app.vue`.\r\n\r\n```ts\r\nuseHead({\r\n meta: [\r\n\t // Set theme-color based on color mode\r\n\t {\r\n\t\t name: 'theme-color',\r\n\t\t key: 'system prefers light mode',\r\n\t\t media: '(prefers-color-scheme: light)',\r\n\t\t content: colorMode.preference === 'dark' ? '#111827' : '#ffffff',\r\n\t },\r\n\t {\r\n\t\t name: 'theme-color',\r\n\t\t key: 'system prefers dark mode',\r\n\t\t media: '(prefers-color-scheme: dark)',\r\n\t\t content: colorMode.preference === 'light' ? '#ffffff' : '#111827',\r\n\t },\r\n\t {\r\n\t\t name: 'theme-color',\r\n\t\t key: 'fallback for browsers without media support for theme-color',\r\n\t\t // use dark style by default, unless preference is set to light explicitly.\r\n\t\t content: colorMode.preference === 'light' ? '#ffffff' : '#111827',\r\n\t },\r\n ],\r\n})\r\n```\r\n\r\nI expect the following meta tags to be present when loading the page:\r\n```\r\n\u003Cmeta name=\"theme-color\" media=\"(prefers-color-scheme: light)\" content=\"#ffffff\">\r\n\u003Cmeta name=\"theme-color\" media=\"(prefers-color-scheme: dark)\" content=\"#111827\">\r\n\u003Cmeta name=\"theme-color\" content=\"#111827\">\r\n```\r\nIn fact, after the initial render (SSR) these meta tags are correctly set. I verified using curl.\r\n\r\nHowever, after client hydration, the meta tags change to the following:\r\n```\r\n\u003Cmeta name=\"theme-color\" media=\"(prefers-color-scheme: dark)\" content=\"#ffffff\">\r\n\u003Cmeta name=\"theme-color\" media=\"(prefers-color-scheme: dark)\" content=\"#111827\">\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_",[3237,3238],{"name":3227,"color":3228},{"name":3239,"color":3240},"upstream","E8A36D",28298,"theme-color meta tags are incorrectly deduped","2024-07-24T16:45:51Z","https://github.com/nuxt/nuxt/issues/28298",0.7241629,{"description":3247,"labels":3248,"number":3251,"owner":3146,"repository":3147,"state":3148,"title":3252,"updated_at":3253,"url":3254,"score":3255},"### Description\n\nSetting primary color to black, doesn't work.\n`ui: {\n colors: {\n primary: 'black',\n neutral: 'zinc'\n }\n}`\n\nIt seems to work on the docs site, so I'm not sure why it won't work for me. Setting it to any other color works just fine.\n\nThe computed values are all `\u003Cempty>`\n\n\u003Cimg width=\"476\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/5e37c4af-b858-4488-8c0f-e697d672d3d3\" />\n\u003Cimg width=\"341\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/b9f0f0ea-fc86-405e-b90a-10e63cf58c54\" />\n",[3249,3250],{"name":3140,"color":3141},{"name":3158,"color":3159},4121,"UI Color Primary Black broken?","2025-05-11T12:36:02Z","https://github.com/nuxt/ui/issues/4121",0.72957885,{"labels":3257,"number":3263,"owner":3146,"repository":3146,"state":3148,"title":3264,"updated_at":3265,"url":3266,"score":3267},[3258,3259,3260],{"name":3192,"color":3193},{"name":3198,"color":3199},{"name":3261,"color":3262},"app","17512D",11736,"`options.css` is not supported","2023-01-19T15:52:40Z","https://github.com/nuxt/nuxt/issues/11736",0.7298963,["Reactive",3269],{},["Set"],["ShallowReactive",3272],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fXKyG39v5N3jv9daHGjcw-cBoHcrlSaMtpR_Cpx9Xwy4":-1},"/nuxt/ui/4809"]