Preflight button appeareance triggers stylelint declaration-property-value-keyword-no-deprecated warning

[krompaco]

What version of Tailwind CSS are you using?

v4.1.8

What build tool (or framework if it abstracts the build tool) are you using?

Checking built file using "stylelint": "16.21.0" with https://stylelint.io/user-guide/rules/declaration-property-value-keyword-no-deprecated/ active.

Describe your issue

Permalink to preflight.css

What do you think about this warning? Are they correct or can the preflight rules be adjusted to avoid it?

213:17-23 warning Expected "button" to be "auto" (declaration-property-value-keyword-no-deprecated)

[thecrypticace]

So, the modern equivalent value for this is appearance: auto and it's been supported for quite a while now (iOS 15.4+ I think). We could change this given that our browser support is technically Safari >= 16.4. However, in v4.1 we did some additional work to improve compatibility with older browsers and iOS < 16.4 doesn't handle appearance: auto correctly for <input type=button/reset/submit/file>. Because of this you have to use appearance: button to ensure these can have a customizable border radius.

I don't think we want to change this because of that but you can definitely override it for your projects by adding a bit of CSS:

@layer base {
  button,
  input:where([type='button'], [type='reset'], [type='submit']),
  ::file-selector-button {
    appearance: auto;
  }
}