Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ensure max specificity of 0,0,1 for button and input Preflight rules #12735

Merged
merged 3 commits into from
Jan 9, 2024

Conversation

adamwathan
Copy link
Member

@adamwathan adamwathan commented Jan 9, 2024

Resolves #12734

Prior to this PR, Preflight contained a couple of attribute selectors which have a specificity of 0,1,0:

  button,
+ [type='button'],
+ [type='reset'],
+ [type='submit'] {
    -webkit-appearance: button; /* 1 */
    background-color: transparent; /* 2 */
    background-image: none; /* 2 */
  }

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:

  button,
+ input:where([type='button']),
+ input:where([type='reset']),
+ input:where([type='submit']) {
    -webkit-appearance: button; /* 1 */
    background-color: transparent; /* 2 */
    background-image: none; /* 2 */
  }

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.

@thecrypticace thecrypticace force-pushed the consistent-preflight-specificity branch from e18e723 to 8cdf1da Compare January 9, 2024 15:48
@thecrypticace thecrypticace changed the title Ensure max specificity of 0,0,1 in all Preflight rules Ensure max specificity of 0,0,1 for button and input Preflight rules Jan 9, 2024
@thecrypticace thecrypticace merged commit ce653c5 into master Jan 9, 2024
10 checks passed
@thecrypticace thecrypticace deleted the consistent-preflight-specificity branch January 9, 2024 16:07
thecrypticace added a commit that referenced this pull request Jan 9, 2024
…12735)

* Ensure max specificity of 001 in all Preflight rules

* Update changelog

* Update changelog

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
@sshmaxime
Copy link

sshmaxime commented Feb 18, 2024

Amazing ! You don't know how many people will be delighted to see this coming out in the next release ! When is it expected ? @adamwathan 🙏

@xsjcTony
Copy link

Same, if this can be addressed, folks are going to be crazy🤩

@deep-project
Copy link

Great.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Button reset rule leads to specificity issues with custom CSS
5 participants