\n\nAnd here’s another example with bg-success/20:\n\n\u003Cimg width=\"520\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/72ca102b-10fa-40ae-aa59-c6f18831d4dd\" />\n\nAs you can see, the fallback color is missing the intended 20% opacity.\n\n### Additional context\n\nI've noticed this Issue when I worked on older browser and the whole page looks odd. I'm looking into the Issue currently and could need an helping and. ",[3063,3064,3065],{"name":3049,"color":3050},{"name":3024,"color":3025},{"name":3053,"color":3054},4432,"Fallback colors are not generated properly for tailwind utilities","2025-07-03T15:25:40Z","https://github.com/nuxt/ui/issues/4432",0.6813732,{"description":3072,"labels":3073,"number":3076,"owner":3027,"repository":3028,"state":3040,"title":3077,"updated_at":3078,"url":3079,"score":3080},"### 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```",[3074,3075],{"name":3049,"color":3050},{"name":3024,"color":3025},4049,"Tailwind colors not working in Nuxt Layers","2025-05-19T10:29:55Z","https://github.com/nuxt/ui/issues/4049",0.6969971,{"labels":3082,"number":3089,"owner":3027,"repository":3027,"state":3040,"title":3090,"updated_at":3091,"url":3092,"score":3093},[3083,3086],{"name":3084,"color":3085},"3.x","29bc7f",{"name":3087,"color":3088},"pending triage","E99695",13385,"Cannot use Tailwindcss classes from composables","2023-01-19T16:54:19Z","https://github.com/nuxt/nuxt/issues/13385",0.70661837,{"description":3095,"labels":3096,"number":3104,"owner":3027,"repository":3027,"state":3040,"title":3105,"updated_at":3106,"url":3107,"score":3108},"### Environment\n\n------------------------------\r\n- Operating System: `Darwin`\r\n- Node Version: `v16.16.0`\r\n- Nuxt Version: `3.2.0`\r\n- Nitro Version: `2.2.1`\r\n- Package Manager: `yarn@1.22.19`\r\n- Builder: `vite`\r\n- User Config: `app`, `typescript`, `runtimeConfig`, `modules`, `colorMode`, `tailwindcss`\r\n- Runtime Modules: `@nuxtjs/color-mode@3.2.0`, `nuxt-icon@0.1.8`, `@nuxtjs/tailwindcss@6.1.3`, `@pinia/nuxt@0.4.6`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\n1. `yarn upgrade nuxt --latest`\r\n2. `yarn dev`\r\n```\r\n ERROR Cannot start nuxt: Cannot find module 'postcss-custom-properties'\r\n```\r\n3. Open `nuxt.config.ts` will see this on the `colorMode` property.\r\n```\r\nArgument of type '{ app: { head: { link: { rel: \"icon\"; type: \"image/svg+xml\"; href: string; }[]; }; }; typescript: { shim: false; strict: true; }; runtimeConfig: { apiSecret: string; public: { apiBase: string; }; }; modules: (string | [...])[]; colorMode: { ...; }; tailwindcss: { ...; }; }' is not assignable to parameter of type 'NuxtConfig'.\r\n Object literal may only specify known properties, and 'colorMode' does not exist in type 'NuxtConfig'.\r\n```\n\n### Describe the bug\n\nAfter upgrading nuxt `3.0.0` to `3.2.0`, will see the problems.\r\n\r\n1. `colorMode` module option in nuxt `3.0.0` shows the type as\r\n```\r\n(property) NuxtConfig['colorMode']?: Partial\u003CModuleOptions> | undefined\r\n```\r\nbut shows error in nuxt `3.2.0`.\r\n\r\n2. We need to install `postcss-custom-properties` in nuxt `3.2.0`, didn't need it in nuxt `3.0.0`.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3097,3098,3101],{"name":3084,"color":3085},{"name":3099,"color":3100},"upstream","E8A36D",{"name":3102,"color":3103},"needs reproduction","FBCA04",18933,"After upgrading Nuxt 3.0.0 to 3.2.0 problem","2024-01-09T06:07:13Z","https://github.com/nuxt/nuxt/issues/18933",0.7077742,{"description":3110,"labels":3111,"number":3119,"owner":3027,"repository":3028,"state":3040,"title":3120,"updated_at":3121,"url":3122,"score":3123},"### 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```",[3112,3113,3114,3117],{"name":3049,"color":3050},{"name":3053,"color":3054},{"name":3115,"color":3116},"closed-by-bot","ededed",{"name":3118,"color":3116},"stale",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.70823026,{"description":3125,"labels":3126,"number":3130,"owner":3027,"repository":3027,"state":3040,"title":3131,"updated_at":3132,"url":3133,"score":3134},"follow up of #2342 \r\nIn global.css:\r\n```\r\n:root {\r\n\t--primary: green;\r\n\t--secondary: blue;\r\n}\r\n.primary {\r\n\tcolor: var(--primary);\r\n}\r\n.secondary {\r\n\tcolor: var(--secondary);\r\n}\r\n.btn-primary {\r\n\tbackground-color: var(--primary);\r\n}\r\n```\r\nIn /pages/dummy.vue\r\n```\r\n\u003Ctemplate>\r\n\t\u003Csection>\r\n\t\t\u003Cp class=\"primary\">primary\u003C/p>\r\n \u003Cbutton class=\"btn btn-primary\">primary button\u003C/button>\r\n\t\t\u003Cp class=\"secondary\">secondary\u003C/p>\r\n\t\u003C/section>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nexport default {\r\n\tmounted () {\r\n\t\tthis.$nextTick(() => {\r\n\t\t\tdocument.documentElement.style.setProperty('--primary', 'yellow')\r\n\t\t\tdocument.documentElement.style.setProperty('--secondary', 'red')\r\n\t\t})\r\n\t}\r\n}\r\n\u003C/script>\r\n```\r\nExpect primary text and button to be yellow and secondary text to be red\r\n\r\nResult:\r\n\r\n\r\nOne of my older project that wan't using Nuxt starter template is able to update CSS variable dynamically: https://horacekeung.github.io/option\r\nIf you change the theme colour of the site, you will see this in dev tool:\r\n\r\nCSS variable --color and --dark are updated as shown.\r\n\r\nMy understanding is that in the Nuxt starter template, CSS is preprocessed hence variables such as --primary and --secondary are no longer a variable.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2051\">#c2051\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3127],{"name":3128,"color":3129},"2.x","d4c5f9",2355,"Unable to update CSS variable (Follow up of #2342)","2023-01-18T15:55:10Z","https://github.com/nuxt/nuxt/issues/2355",0.7086,{"description":3136,"labels":3137,"number":3130,"owner":3027,"repository":3028,"state":3040,"title":3143,"updated_at":3144,"url":3145,"score":3134},"### Environment\n\n- Figma file v1.3.0\n\n### Version\n\nv1.3.0\n\n### Reproduction\n\nNo reproduction needed\n\n### Description\n\n \nI’m using Nuxt UI Pro for a large project that also requires extensive mockups. I bought the Figma file, and while I found some things I could live with, I made changes to my local file for better usability. Some changes may be applied to the nuxt ui system design as well.\n\nI’m using the Figma file **v1.3.0**.\n\n# Icon\n\nThe user solid icon includes two vector icons.\n\n\n\n# General\n\nThere are several components with outdated auto-layouts that need updating.\n\n# Colors\n\nAlpha colors are missing from the variables. For instance, if you change the primary color (e.g., in buttons), you might still find some hardcoded green with alpha values, along with other green variations.\n\nMy personal solution was to add alpha variables and apply them to the components that needed them. The scaffolding isn’t perfect—it might be better to use something like “400/25, 400/10”—but it works.\n\n\n\nAlso, in some components, only the primary color is available, but in certain cases, you can use other colors as well. For example, the **Button** component only has the primary color, but other colors like red and green can also be used.\n\nMy solution was to handle the variants differently. Instead of having different shades for the primary color, I used the first column for the primary color and the other columns for other useful colors like red, green, and orange. I know 4 columns is the limit for non-enterprise accounts, but for now, it’s the best solution short of manually changing the colors.\n\n\n\n# Component Variant Organization\n\nSome components are hard to use because of how they are organized. For example, the **dropdown** component.\n\nThe default variant only includes the **button** component because the dropdown is hidden. This means that toggling **isOpen** over time causes you to lose all the configurations for the **DropdownMenu**.\n\n\n\nI used it in the sidebar, enabled **isOpen**, configured the **DropdownMenu**, and then disabled **isOpen**. However, after making some changes and reopening the dropdown, some configurations—like positioning—were lost. Sometimes it even loses all the work I’ve done on the **DropdownMenu**.\n\nThe solution, though tedious, is to include all components for every variation.\n\n# Component Slot\n\nSome components in the code offer slots that are missing in the system design. For example, the **DashboardSection**.\n\nThis is just one case, but I often find myself detaching components just to add a custom placeholder component so I can use the components with the correct slot. It’s tedious, but it’s the best way to mimic the framework.\n\n# Placeholder\n\nIn general, I like the placeholders for the slots, but they can clutter the outline view. I understand that they look nicer and maintain quality, but for the outline view, a simple 5x5 tiled image could achieve the same effect while being lighter and *slightly* less memory-intensive. \n\n\n\n# SelectMenuItem\n\nThere are two **SelectMenuItem** components in the **———— SelectMenu - UNPUBLISHED COMPONENTS! ————** section. This means you can’t use them, as Figma cannot determine which component to apply. I changed the latter to **SelectMenuItemPlaceholder**\n\n\n\n\n# TableHeadItem\n\n **Span** and **Sortable** have different text variants. I standardized **Span** to match the button’s font weight.\n\nThanks for the amazing job.\nI can be of any help if needed.\n\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3138,3139,3142],{"name":3049,"color":3050},{"name":3140,"color":3141},"pro","5BD3CB",{"name":3118,"color":3116},"[Figma] Figma Kit Pro suggestions","2025-03-08T21:39:15Z","https://github.com/nuxt/ui/issues/2355",["Reactive",3147],{},["Set"],["ShallowReactive",3150],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fxjKktKdaTnfoEWMKNLQMH8K1KAVUp5pkRflUzT5VDBc":-1},"/nuxt/ui/3025"]