preflight button reset in v3 inconsistent with v2

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

https://github.com/tailwindlabs/tailwindcss/pull/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;
}

[pbeshai]

FWIW I worked around this by disabling preflight: https://tailwindcss.com/docs/preflight#disabling-preflight

module.exports = {
  corePlugins: {
    // due to https://github.com/tailwindlabs/tailwindcss/issues/6602 - buttons disappear
    preflight: false,
  },
  ...
}

You could then potentially add a variant of preflight manually, but it is unfortunate.

I ended up including a copy of preflight in my repo then commented out the reset of background image and color.

[coader]

we use another ui libary and it also auto insert css style in head, tailwind always gen css in the last position, so still have conflict with it