Description
What version of Tailwind CSS are you using?
For example: v3.0.6
What build tool (or framework if it abstracts the build tool) are you using?
postcss: 8.3.11
webpack: 5.65.0
What version of Node.js are you using?
v14.16.1
What browser are you using?
Chrome
What operating system are you using?
macOS
Reproduction URL
https://play.tailwindcss.com/AJDoBTeOhx
Describe your issue
#5358 removes the dependency on modern-normalize, and then inlines and consolidates it with preflight.
During this consolidation it appears as:
button {
background-color: transparent;
background-image: none;
}was merged with:
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
}Resulting in
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button; /* 1 */
background-color: transparent; /* 2 */
background-image: none; /* 2 */
}Since [type='button'], [type='reset'], [type='submit'] have high specificity simple background-color and background-image styles included before tailwind are being overridden. This did not occur in v2 when the rules were separate. (I recognize this is not best practices but I am working in a legacy app.)
I would be happy to open a PR that breaks apart the rules restoring v2 behavior (if that is desired):
/*
Remove default button styles.
*/
button {
background-color: transparent;
background-image: none;
}
/*
Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
}