Ensure max specificity of 0,0,1 for button and input Preflight rules #12735
+6
−5
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Resolves #12734
Prior to this PR, Preflight contained a couple of attribute selectors which have a specificity of
0,1,0
:These have the same specificity as a class, and users often ran into situations where these rules were conflicting with custom classes in their own CSS, especially when importing CSS from other libraries like Material UI or Radix Themes.
The recommended solution has always been to order your imports based on which rules you want to take precedence, which is also what the Radix team has been recommending. Giving people control over the order of their CSS like this is the whole reason Tailwind has three separate groups of styles (base, components, and utilities) after all — if we didn't expect people to need/want to do this we'd just make it a single
@tailwind styles
rule or something.I still think it's important people understand how this sort of thing works in CSS or they'll inevitably run into other collisions when mixing multiple libraries, but this PR tries to make Preflight less order sensitive by reducing the specificity of the aforementioned rules to
0,0,1
:We could reduce the specificity to
0,0,0
using just:where([type='button'])
but that feels a bit riskier to me as it introduces the potential for even*
rules to override these rules if things were in the wrong order. Makes the most sense to me that all four selectors in this rule have the same specificity.This change depends on
:where()
which is a somewhat modern CSS feature and one that didn't exist at the time Preflight was initially authored, but it's has Safari 14 support which feels good enough to me.This problem is one of our most active GitHub discussions so I think it's worth tweaking.
In the next major version of Tailwind we’ll be using real CSS layers which isolate all of their styles, so the specificity of rules in Preflight won’t matter at all.