Support color opacity with CSS variable

[wdavidw]

It seems like CSS opacity is not supported when the color is obtained from a CSS variable. Here is an example you can copy/paste into Tailwind Play:

<div class="absolute w-full h-full bg-slate-300 [--test:#00FF00]">
  <div class="h-[33%] bg-[#00FF00]/50">
    work
  </div>
  <div class="h-[33%] bg-[var(--test)]/50">
    does not work
  </div>
  <div class="h-[33%] bg-[var(--test)]">
    work
  </div>
</div>

[adamwathan]

Hey! You can do this but you have to set things up a little differently, see the documentation on this topic here:

https://tailwindcss.com/docs/customizing-colors#using-css-variables

[wdavidw]

Thank you @adamwathan, I am aware of this approach. It adds extra complexity and it is not what we would expect.

However, having a second look at bg-[var(--test)]/50, it seems like it is not possible for Tailwind to compile into CSS. It is technically not implementable, right ?

[adamwathan]

Yeah the way outlined in the docs is the only way to make it even possible with CSS. Currently CSS doesn’t offer any way to adjust the opacity channel of a color once that color is sort of “locked in” to a variable, they’d need to add some sort of color function to make it possible like:

:root {
  --my-color: rgb(76, 98, 177);
}

.my-class {
  background-color: alpha(var(--my-color), 0.4);
}

…but nothing like that currently exists and isn’t possible to polyfill at build time since it needs to be able to happen at runtime in the browser.

[k16e-me]

I stumbled on this from search today, 2 years later. Would be really nice if we got a w/around.

[phaux]

Works in v4

<div class="[--accent:hotpink]">
  <p class="text-(--accent)/50">Test</p>
</div>

https://play.tailwindcss.com/bf1YQyljxU

[k16e-me]

v4 is probably tw's best yet... then again, shouldn't it only get better? Thanks

[ivan-kleshnin]

@k16e-me

Is there a convenient way to reproduce this:

/* CSS file */
theme(--color-slate-500 / 10%)

with var?

• opacity, separate rule -- isn't enough for gradients and other multi-color settings
• color-mix(in srgb, var(--my-hex-color) calc(<alpha-value> * 100%), transparent) -- too long, cumbersome
• rgb(var(--color-primary), <alpha-value>) -- rounds down to more limited RGB space

[wongjn]

You can use --alpha(): https://play.tailwindcss.com/8oRCGVsCUV?file=css