bg-opacity doesn't work on dark mode #13703
-
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, |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 1 reply
-
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 |
Beta Was this translation helpful? Give feedback.
-
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:
and the js part (alpinejs in our case) spits out something like Without opacity you wouldn’t see anything and everything has the same color, but by setting class to:
…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 (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) |
Beta Was this translation helpful? Give feedback.
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