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;
}