Replies: 1 comment 3 replies
-
You could consider using the opacity syntax. It is more apparent about what is happening – that the opacity is "attached" to the color instance. The You could expand the opacity syntax to use a CSS variable if you want the opacity to apply to both light and dark: https://play.tailwindcss.com/FBRhJGvOBh |
Beta Was this translation helpful? Give feedback.
3 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
This gets me every time: https://play.tailwindcss.com/TLino7oA8k
(You need to enable/disable dark mode manually to see, on macOS in System settings -> Appearance)
What's really the reason
border-opacity-x
,text-opacity-x
, andbg-opacity-x
only apply to "light mode?" Hence, to have the opacity show up in dark mode as well you need to specifically adddark:border-opacity-30
anddark:bg-opacity-30
.While this seems to add some unnecessary boiler plate, it also adds confusion (well, at least to me!) Wouldn't it be more intuitive if
bg-opacity-30
applied to both light and dark mode, and if you didn't want it in dark mode you'd adddark:bg-opacity-100
?The big daddy --
opacity-x
-- doesn't have this normal/dark split personality behavior, for instance.Beta Was this translation helpful? Give feedback.
All reactions