Using CSS variables in background alpha syntax doesn’t work (bg-gray-600/[var(--overlay-opacity)])

[MonaAghili]

Hi

I'm trying to use a CSS variable for background opacity in Tailwind v4 using the new slash-alpha syntax. My code looks like this:

<div class="bg-gray-600/[var(--overlay-opacity)] dark:bg-gray-200/[var(--overlay-opacity)]"></div>

:root {
  --opacity-base: 10;
  --overlay-opacity: 100;
}

I expected this to apply bg-gray-600 with alpha = 10% (or 100%), depending on the variable value. But it doesn't work in the browser the background stays fully opaque.

This seems not work! So is Tailwind CSS not supporting CSS variables inside the opacity portion of the slash notation ?

[wongjn]

It needs to be a percentage. Furthermore, --overlay-opacity would be 100% which would be opaque anyway. Changing it to something lower than 100% should visually affect the opacity of the color: https://play.tailwindcss.com/edTMYahLBy

[MonaAghili]

Thanks 🙏

Yes, the problem was with the percentage.

[data-opacity="transparent"] { --overlay-opacity: calc(var(--opacity-base) * 1%); }  /* 10% */

[data-opacity="tinted"] { --overlay-opacity: calc(var(--opacity-base) * 5%); }  /* 50% */

[data-opacity="solid"] { --overlay-opacity: calc(var(--opacity-base) * 10%); }  /* 100% */

I'm calculating based on a prop, but I didn't take the % into account.
Now it's solved