Tailwindcss: hover:bg-opacity-* not working

[rahadkc]

Describe the problem:

hover:bg-opacity-* not working when using custom color variable using css variable.
hover:bg-opacity-* works when using default Tailwind color variable

I have custom css color variable generated using tailwind.config.js

when I am using bg-gray-500 hover:bg-opacity-50 it works fine.
But when I am using bg-primary hover:bg-opacity-50 , it doesn't work. Opacity have no effect.

Tailwind Version: 1.5.2

Link to a minimal reproduction: Not any

[kevinruscoe]

The opacity utils use a --bg-opacity var for the opacity, so your colours will need to use that. Make a look through the code, you'll see what needs to change.

[crswll]

If you set your variables like

:root {
  --primary: 0 0 0;
  --secondary: 0 255 0;
}

You can do:

{
  primary: 'rgb(var(--primary) / var(--bg-opacity, 1))',
  secondary: 'rgb(var(--secondary) / var(--bg-opacity, 1))',
}

Unfortunately no simple way to approach this with hex as far as I'm aware.

[rahadkc]

@crswll it's bit complex though. I'm just using opacity-* instead of bg-opacity-*. It serves the purpose now.
Anyway, thanks for your answer.