Button reset rule leads to specificity issues with custom CSS

[vladmoroz]

Reproduction URL

https://codesandbox.io/p/devbox/jovial-sound-sgqddr?file=%2Fapp%2Fglobals.css%3A4%2C19

Describe your issue

The attribute selectors in the following rule of the CSS reset have a specificity of 0-1-0:

[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button;
    background-color: initial;
    background-image: none
}

The issue arises when importing a CSS file with rules of matching specificity:

/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "./example-button.css";

/* example-button.css */
.example-button {
  background-color: blue;
}

No matter the order, the styles from @tailwind base are appended after the imported file and take over the rules that use a CSS class selector.

I know this has been raised before, but I haven’t seen any discussion about an easy possible fix being the :where() selector there to lower the specificity to 0-0-0:

:where([type=button], [type=reset], [type=submit], button) {
    -webkit-appearance: button;
    background-color: initial;
    background-image: none
}

This way, @tailwind base won’t impact any custom styles, while components and utilities work as is.

Additional context
I’m one of the Radix Themes maintainers. While we don’t use Tailwind to build Radix Themes itself, one of the goals we have is to provide a great experience for people using any styling technology for their custom styles, including Tailwind users. Ideally, this would “just work”. However, it doesn’t, and although workarounds exist, we found that the vast majority of people struggle to debug this intuitively.

I also think that fixing this would improve the situation for everyone, as the scenario that my reproduction URL shows is very basic and plausible in many codebases where hand-rolled styles are used hand in hand with Tailwind.

[adamwathan]

Thanks @vladmoroz — agree we can drastically reduce the number of times people bump into this conflict with this change. All this stuff was authored before :where() had good browser support but support is really good now so I think it's a good time to do it.

Opened a PR here with a couple tweaks to keep the specificity as 0,0,1: #12735