tailwindcss
tailwindcss copied to clipboard
Add CSS `color-scheme` utilities
This PR adds utilities for the color-scheme
CSS property.
(Ignore the browser support for the only word it doesn't break functionality in any browser and definitely works in Chrome)
Funny, I've the same code in my projects
Thanks for the information.
Hey!
You might have noticed that I forced pushed to this branch. The reason is because the PR now uses next
as the base branch which is our working branch for Tailwind CSS v4. In other words, the feature you implemented here is now written in the new codebase.
The code is ported as-is, so no API changes of your feature happened while moving it to the new codebase.
I also made sure to add you as a co-author because you still deserve all the credit 💪
@lukewarlow @RobinMalfait How would you feel about using shorter utility names?
-
color-scheme-dark
orscheme-dark
ordark
(dark
in a util context would be different from itsdark:
variant context) -
color-scheme-dark-only
orscheme-dark-only
ordark-only
I could see an argument for the verbose names as these would not be so commonly used and would be simpler to understand when encountered if they are 1:1 with CSS, but I could also see it being helpful to have shorter names if a codebase has a common practice of making certain sections dark vs. light in different contexts.
My thinking on this is that more verbosity is better, makes them easily discoverable. dark-only might make someone think this hides this element in dark mode.
For an existing example there's the file: pseudo instead of file-selector-button which admittedly is a bit verbose but people didn't realise tailwind had this variant I think in part because it wasn't a match to the pseudo name. (file might also end up being a future compat issue if other file element pseudos are ever added but that's a separate discussion).
All that being said I trust in the framework authors to weigh up tradeoffs and come to a decision that's right for them :)
@lukewarlow Absolutely! I'm with it 🙂