bg-opacity doesn't work on dark mode

[exxsy]

What version of Tailwind CSS are you using?

v3.0.24

What version of Node.js are you using?

v21.0.0

What browser are you using?

Chrome, Firefox Nightly

What operating system are you using?

Windows

Reproduction URL

https://play.tailwindcss.com/DpTJBw8PNW

Describe your issue

I am working with .bg-opacity & opacity for transition & such,
But tailwind does not apply that bg-opacity for dark mode, if you remove the dark: prefix it works well.

[adamwathan]

Hey! When you override a color in dark mode the opacity is reset, so you need to specify the opacity for dark mode too 👍🏻

https://play.tailwindcss.com/a9R30WT8Pc

I'd recommend using the opacity modifier syntax instead though — we consider the bg-opacity-* utilities deprecated, they haven't been documented since v2 and will be removed in v4:

https://play.tailwindcss.com/YW6NLfR1hL

[exxsy]

Oh thanks, must've been missed that one.

[dfallman]

I had a similar question here @adamwathan : #13722

To me this feels a little non-intuitive, I don’t see why the opacity of something should be reset when you switch light/dark modes?

I also don’t think it’s a good idea to depreciate bg-opacity, text-opacity, and border-opacity for the reasons I state in the other thread — but basically because it sometimes is very handy to have them as freestanding modifiers!

For instance, in one of our projects we get a “hero color” from a js theming engine. We’d say:

… class=“border rounded-xl p-3 text-2xl font-bold” :class=“theme(‘hero_text bg_hero hero_border’)”…

and the js part (alpinejs in our case) spits out something like text-[#a1b2c3] bg-[#a1b2c3] border-[#a1b2c3]

Without opacity you wouldn’t see anything and everything has the same color, but by setting class to:

…class=”border rounded-xl p-3 text-2xl font-bold bg-opacity-10 border-opacity-30”

…it’s possible to do quite a lot visually just using a free-standing (but type-of-object-specific) opacity modifier.

In the above case it’s not really possible to use either the /10 modifier or the generic opacity-10.

(and yes, it’s obviously possible to add more classes to the js theme, and yes, there are other ways to implement theming, and yes, we can use css as a fallback)