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

[adamwathan]

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.

[sshmaxime]

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]

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

[deep-project]

Great.