dark variant not respecting bg-opacity

Describe the problem:

I have darkMode: 'class' in my config.

When using these classes: bg-gray-100 bg-opacity-50 dark:bg-gray-900 , the bg-opacity is only applied in light mode, but in dark mode bg-opacity is ignored.

I had to add the dark variant to: backgroundOpacity: ['dark'], then also add dark:bg-opacity-50 to the element to get it to work in dark mode.

Expected behaviour: dark mode should also respect the bg-opacity class (unless overriden for dark).

Link to a minimal reproduction:

https://play.tailwindcss.com/GHoILXz6cp

[adamwathan]

Looking into this further this is actually a little more annoying than it looks — it turns out bg-opacity-50 for example will apply on top of dark:bg-white or whatever if you use the media dark mode, but if you use the class dark mode it won’t. This is actually because of the selector specificity, not because of the order. .dark .dark\:bg-white has a higher specificity than bg-opacity-50.

This means that currently the behaviors are different depending on which dark mode you use, and that really sucks but I can’t think of a way to avoid it.

One approach would be to change the color plugins to work the way box shadow does where we add a universal selector to set the initial opacity, to avoid the cascade problems @DylanVann explained:

* {
  --tw-bg-opacity: 1
}

But this would be a breaking change, because this code would behave differently:

<div class="bg-red-500 bg-opacity-50 md:bg-blue-500">

Currently that code would have a 100% opacity blue 500 background on md screens, but with this change it would preserve the opacity set by bg-opacity-50 on the other screens. This is honestly probably a better behavior but it’s breaking, so not something we can change until v3.

I’ve merged the PR to enable dark variants for for color opacity utilities regardless since that will help in this situation but I don’t think we can do anything about the consistency between media and class modes for at least a year or two I’m afraid 😕

[DylanVann]

@marceloadsj I think the problem would be the cascade. If tw-bg-opacity is set above then it will affect your color, which people likely would not consider or want when they use just a color class on something.

An alternative way to implement dark mode that doesn’t have this issue is to use CSS variables for your color palette. I have a demo of this: https://github.com/DylanVann/tailwind-css-variable-colors-demo

The downside I see of this is that the color palette is a bit verbose to define and is not purged.