Environment

• Operating System: Windows_NT
• Node Version: v22.14.0
• Nuxt Version: 3.16.0
• CLI Version: 3.22.5
• Nitro Version: 2.11.6
• Package Manager: pnpm@10.6.1
• Builder: -
• User Config: compatibilityDate, devtools, typescript, ssr, app, modules, ui, colorMode, i18n, gtag, icon, robots, pwa, runtimeConfig
• Runtime Modules: @nuxt/ui@2.21.1, @nuxtjs/i18n@9.3.1, nuxt-gtag@3.0.2, @pinia/nuxt@0.10.1, pinia-plugin-persistedstate/nuxt@4.2.0, @nuxt/icon@1.10.3, @nuxtjs/robots@5.2.6, @vite-pwa/nuxt@0.10.6, @formkit/auto-animate/nuxt@0.8.2
• Build Modules:

Is this bug related to Nuxt or Vue?

Nuxt

Version

2.21.1

Reproduction

https://codesandbox.io/p/sandbox/optimistic-http-yz8djj

Description

The hover effect doest work when you pass the color as variable. Doesn't work with some colors like indigo, pink, sky...

Additional context

No response

Logs