How to change bg or text opacity independently of color in v4?

[alexchexes]

Hi! Before v4, it was possible to change just the opacity of the background or text using bg-opacity-X or text-opacity-X.
I understand that these classes were removed in v4, but what is the replacement?

Sometimes, we need to control the opacity of text or the background without knowing the color in advance, so bg-COLOR/X is not an option. bg-opacity-X worked perfectly before, but now I just can't figure out how to do that.

[wongjn]

You could use CSS variables like bg-(--color)/50 and then set the CSS variable value "later" when you do know the color.

[alexchexes]

Thank you! One of my use cases is like this:

<TheButton
  :color="isGood ? 'green' : 'red'"
  :class="notImportant && 'bg-opacity-50'"
/>

and

<TheButton
  :color="isGood ? 'white-green' : 'white-red'"
  :class="notImportant && 'text-opacity-50'"
/>

The :color="green/red" attribute binds not just the background but also other classes, like bg-green-500 enabled:hover:bg-green-600 text-green-50, applying a different set of classes for each color variation.

The problem is that we don't know the exact color being applied (e.g., maybe it's bg-green-400, or maybe bg-lime-600, we just say that 'I need a "green" button'). The same applies to text in the second example: white-green sets something like bg-white text-green-800.

Because of this, even more verbose approach like this
notImportant && (isGood ? 'bg-green-X/50' : 'bg-red-X/50').
won't work in this case.

Messing with the internal colors of <TheButton> wouldn't be a good option either.

Previously it was so easy to just set bg-opacity-X/text-opacity-X, so looking for a way to do that in v4...

[wongjn]

The most analagous way I could think of is:

<TheButton
  :color="isGood ? 'green' : 'red'"
  :style="notImportant && '--bg-alpha:.5'"
/>

And then in TheButton:

<script>
const DICTIONARY = {
  green: 'bg-green-400/[var(--bg-alpha,1)]',
  …
};
</script>

<div :class="DICTIONARY[color]">Foo</div>

[alexchexes]

'bg-green-400/[var(--bg-alpha,1)]'
'--bg-alpha:.5'

Uhh... That's better than nothing, so thanks! Do you think it's possible to create a custom utility or tweak the existing ones based on this approach? I mean, so we could just use bg-green-400 and then a custom bg-opacity-X. Or would this require modifying Tailwind's source code?

[wongjn]

You could do for all the color utilities you'll use the <prefix>-opacity-* pattern for:

@utility bg-* {
  background-color: color-mix(in oklch, --value(--color-*, [color]) var(--tw-opacity, 100%), transparent);
}

@utility bg-opacity-* {
  --tw-opacity: calc(--value(integer) * 100%);
}

Though do note this will cause duplicate bg-<color> classes in the output CSS (since we can't disable the built-in bg-<color> utilites:

.bg-red-500 {
  background-color: var(--color-red-500);
}
.bg-red-500 {
  background-color: color-mix(in oklch, var(--color-red-500) var(--tw-opacity, 100%), transparent);
}

https://play.tailwindcss.com/5vJ3ka5AVO

[alexchexes]

Cool! Are there any possible drawbacks besides just the fact that classes are duplicated?

I created a text-opacity- "polyfill" in the same manner, and as far as I can see, both @utility bg-* and @utility text-* don’t interfere with classes like bg-auto or text-2xl, so everything seems to be working normally.

https://play.tailwindcss.com/Ep7Ipcz86E

What do you think? Is this a viable way to use bg-opacity-/text-opacity- in V4?

[wongjn]

I don't know, I haven't used anything like this.

[alexchexes]

Okay, thanks anyway for the help. Although it’s kind of a "hack," I’ll mark it as the answer since there doesn’t seem to be any other way to achieve this in v4. Maybe this will be useful for someone googling "bg-opacity Tailwind CSS v4."
Thanks!