Button hover effect

[suchorski]

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

[romhml]

The color you are using is not valid, you must use color aliases in v3, see https://ui.nuxt.com/getting-started/theme#colors. Your can customize them using CSS variables too if you want to change them.

[suchorski]

I'm using ui v2.

But I found that I was missing. My tailwindcss config was wrong

It was purging classes that was on script tag. So the classes of that color wasn't bundled

[romhml]

Ok, the reproduction you send was for v3, please use the v2 playground next time.