Add consistent base styles for buttons and form controls

[philipp-spiess]

This PR introduces consistent base styles for buttons and form controls in Tailwind CSS v4.

Motivation

In v3, form elements lack default styles, which can be confusing—especially when certain elements, like a text input without a placeholder or value, are rendered completely invisible on the page.

The goal of this change is to provide reasonable default styles for buttons, inputs, selects, and textareas that are (mostly) consistent across all browsers while remaining easy to customize with your own styles.

This improvement should make Tailwind more accessible for developers new to the framework and more convenient in scenarios where you need to quickly create demos (e.g., using Tailwind Play).

Light and dark mode support

These styles support both light and dark mode, achieved using the light-dark() CSS function. While browser support for this function is still somewhat limited, Lightning CSS transpiles it to a CSS variable-based approach that works in older browsers.

For this approach to function correctly, a default color-scheme must be set in your CSS (as explained in the Lightning CSS documentation). This PR addresses this requirement by setting the color-scheme to light on the html element in Preflight.

Breaking changes

While we don’t expect these changes to significantly impact v3 users upgrading to v4, there may be minor differences for those relying on the simpler v3 styles.

For example, Preflight now applies a border-radius to buttons and form controls. If you weren’t explicitly setting the border radius to 0 in your project, you’ll need to do so to restore the previous look.

Thankfully, reverting to the v3 styles is straightforward—just add the following reset to your CSS:

@layer base {
  input,
  textarea,
  select,
  button {
    border: 0px solid;
    border-radius: 0;
    padding: 0;
    color: inherit;
    background-color: transparent;
  }
}

It’s worth noting that this reset doesn't touch the ::file-selector-button styles that were added in this PR. This is because it's not possible to reliably "undo" these styles and restore the original user-agent styles (which is what was used in v3), as these are different in each browser. However, these new styles actually match the defaults in most browsers pretty closely, so hopefully this just won't be an issue.

Codemod

This PR includes a codemod that automatically inserts the above mentioned v3 reset to help avoid breaking changes during the upgrade. The codemod will insert the following CSS:

/*
  In Tailwind CSS v4, basic styles are applied to form elements by default. To
  maintain compatibility with v3, the following resets have been added:
*/
@layer base {
  input,
  textarea,
  select,
  button {
    border: 0px solid;
    border-radius: 0;
    padding: 0;
    color: inherit;
    background-color: transparent;
  }
}

Testing

These changes have been tested across a wide range of browsers, including Chrome, Safari, Firefox, Edge, and Opera on macOS and Windows, as well as Safari, Chrome, Firefox, and several lesser-known browsers on iOS and Android.

However, some quirks still exist in certain mobile browsers, such as iOS Safari, which adds too much bottom padding below date and time inputs:

The only reliable way to address these issues is by applying appearance: none to these form controls. However, this felt too opinionated for Preflight, so we’ve opted to leave such adjustments to user-land implementations.

[RobinMalfait]

Still testing, but let's add a changelog entry 👍

[madmoizo]

After upgrading to alpha.36, this change had some unexpected effects.
forcing color-sheme is one of them.
Is there a way to make this an opt-out instead of forcing the user to reset the reset ?

[philipp-spiess]

@madmoizo Hey! Curious what the difference were for you/how did this affect your site? Do you use the <meta> tag to set the default color-scheme?

[philipp-spiess]

Regarding the opt out: you can add this to your css:

html {
  color-scheme: light dark;
}

Regarding the general form changes, you can opt-out by pasting this code snippet;

/*
  In Tailwind CSS v4, basic styles are applied to form elements by default. To
  maintain compatibility with v3, the following resets have been added:
*/
@layer base {
  input,
  textarea,
  select,
  button {
    border: 0px solid;
    border-radius: 0;
    padding: 0;
    color: inherit;
    background-color: transparent;
  }
}

However, still curious how you noticed the issue.

[madmoizo]

I noticed it because meta tag seems to override the color-scheme css properties.

 <meta name="color-scheme" content="dark light"/>

So my website is in dark mode but the introduced color-scheme: light on html forced the form element to have light-scheme color because of the new tailwind base styles on form element.
Even without it, base styles on form elements force a color, border, etc which I didn't have to override before.

[madmoizo]

Additionally, Tailwind used to reset browser base styles. Having to reset consistent Tailwind base styles is not much different from having to reset browser base styles. I have no strong feelings about this; I'll adapt. However, it might be better to let the user choose to opt-in/opt-out instead of making them find the properties to reset/dig into GitHub issues or documentation to find the correct reset code.

Edit:
For example, in the reset code you suggested, you forgot <option>:

[philipp-spiess]

@madmoizo Completely understand and hear your feedback here. The color-scheme change is definitely something that we're still talking about internally. The change here is also limited because of the limited browser support for the light-dark() function and available polyfills. I'll update the thread here when we know more!

For example, in the reset code you suggested, you forgot :

option wasn't something we reset in v3 either it seems like 😬
https://github.com/tailwindlabs/tailwindcss/blob/main/src/css/preflight.css#L167-L183

But yeah this snippet is not getting you back the exact v3 defaults but is more or less a fix to reset the padding/spacing stuff for compatibility.

[madmoizo]

I just meant it's parts of the changes introduced by the new tailwind base styles (which adds a not directly visible change)

[philipp-spiess]

Yeah this makes sense but the default would also be styled by the browsers and in order, you can think of our new preflight more like a consistent default browser style that works across all our browser targets.

[philipp-spiess]

@madmoizo Hey there! Just wanted to update our discussion that we've decided to revert this PR in #15100. Thanks a ton for your feedback on this.