From dad9ac620936325cc45929307fd7db9c8feb2e83 Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Fri, 22 Nov 2024 08:55:05 -0500
Subject: [PATCH] Revert new default form styles (#15100)

Closes #15071

This PR reverts the changes in #15036 which add consistent base styles
for buttons and form controls to Preflight.

While this felt like a good idea (for the reasons explained in that PR),
practically this is just too disruptive of a change for people upgrading
from v3 to v4.

While updating some of our projects to v4 we found ourselves adding
classes to undo styles more often than we expected, and it also felt
inconsistent to have to use a different set of classes to style a link
or a button when we wanted them to look the same.

We also decided it feels a little strange that you could change the
border color of an element without ever specifying that it should have a
border, for example this just feels a little wrong:

```html
<button class="border-blue-500">
```

We also needed to set a default `color-scheme` value for any of this
stuff to work which breaks the ability to use the `color-scheme` meta
tag.

Since this change was a fairly major breaking change and we aren't
feeling much benefit from it, it doesn't feel worth making this change
for v4.

---------

Co-authored-by: Philipp Spiess <hello@philippspiess.com>
---
 CHANGELOG.md                                  |   4 +
 integrations/upgrade/index.test.ts            | 340 ------------------
 integrations/upgrade/js-config.test.ts        | 289 ---------------
 .../src/__snapshots__/index.test.ts.snap      | 106 +-----
 .../src/codemods/migrate-preflight.test.ts    |  85 -----
 .../src/codemods/migrate-preflight.ts         |  21 +-
 .../@tailwindcss-upgrade/src/index.test.ts    |  51 ---
 packages/tailwindcss/preflight.css            | 151 ++------
 8 files changed, 59 insertions(+), 988 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b45cb9b3c..9fc3348d6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Use configured `--letter-spacing` values for custom font size utilities ([#15099](https://github.com/tailwindlabs/tailwindcss/pull/15099))
 - Ensure `space-x/y-*` and `divide-x/y-*` with variants can undo `space-x/y-reverse` and `divide-x/y-reverse` ([#15094](https://github.com/tailwindlabs/tailwindcss/pull/15094))
 
+### Changed
+
+- Revert the new base styles for buttons and form controls ([#15100](https://github.com/tailwindlabs/tailwindcss/pull/15100))
+
 ## [4.0.0-beta.1] - 2024-11-21
 
 ### Added
diff --git a/integrations/upgrade/index.test.ts b/integrations/upgrade/index.test.ts
index 34be2cce0..a65ee6092 100644
--- a/integrations/upgrade/index.test.ts
+++ b/integrations/upgrade/index.test.ts
@@ -120,23 +120,6 @@ test(
       --- ./src/input.css ---
       @import 'tailwindcss';
 
-      /*
-        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;
-        }
-      }
-
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
         so we've added these compatibility styles to make sure everything still
@@ -229,23 +212,6 @@ test(
       --- ./src/input.css ---
       @import 'tailwindcss' prefix(tw);
 
-      /*
-        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;
-        }
-      }
-
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
         so we've added these compatibility styles to make sure everything still
@@ -310,23 +276,6 @@ test(
       --- ./src/index.css ---
       @import 'tailwindcss';
 
-      /*
-        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;
-        }
-      }
-
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
         so we've added these compatibility styles to make sure everything still
@@ -399,23 +348,6 @@ test(
       --- ./src/index.css ---
       @import 'tailwindcss';
 
-      /*
-        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;
-        }
-      }
-
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
         so we've added these compatibility styles to make sure everything still
@@ -493,23 +425,6 @@ test(
       --- ./src/index.css ---
       @import 'tailwindcss';
 
-      /*
-        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;
-        }
-      }
-
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
         so we've added these compatibility styles to make sure everything still
@@ -619,23 +534,6 @@ test(
 
       @import 'tailwindcss';
 
-      /*
-        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;
-        }
-      }
-
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
         so we've added these compatibility styles to make sure everything still
@@ -1140,23 +1038,6 @@ test(
       @import 'tailwindcss';
       @import './utilities.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;
-        }
-      }
-
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
         so we've added these compatibility styles to make sure everything still
@@ -1605,23 +1486,6 @@ test(
 
       @config './tailwind.config.ts';
 
-      /*
-        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;
-        }
-      }
-
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
         so we've added these compatibility styles to make sure everything still
@@ -1646,23 +1510,6 @@ test(
 
       @config "../../tailwind.config.ts";
 
-      /*
-        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;
-        }
-      }
-
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
         so we've added these compatibility styles to make sure everything still
@@ -1697,23 +1544,6 @@ test(
         --color-blue-500: #00f;
       }
 
-      /*
-        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;
-        }
-      }
-
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
         so we've added these compatibility styles to make sure everything still
@@ -1743,23 +1573,6 @@ test(
       @import 'tailwindcss/theme' layer(theme);
       @import 'tailwindcss/preflight' layer(base);
 
-      /*
-        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;
-        }
-      }
-
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
         so we've added these compatibility styles to make sure everything still
@@ -1791,23 +1604,6 @@ test(
 
       @config '../../tailwind.config.ts';
 
-      /*
-        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;
-        }
-      }
-
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
         so we've added these compatibility styles to make sure everything still
@@ -1988,23 +1784,6 @@ test(
       @import 'tailwindcss/theme' layer(theme);
       @import 'tailwindcss/preflight' layer(base);
 
-      /*
-        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;
-        }
-      }
-
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
         so we've added these compatibility styles to make sure everything still
@@ -2141,23 +1920,6 @@ test(
       @import 'tailwindcss/theme' layer(theme);
       @import 'tailwindcss/preflight' layer(base);
 
-      /*
-        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;
-        }
-      }
-
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
         so we've added these compatibility styles to make sure everything still
@@ -2275,23 +2037,6 @@ test(
       @import 'tailwindcss/theme' layer(theme);
       @import 'tailwindcss/preflight' layer(base);
 
-      /*
-        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;
-        }
-      }
-
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
         so we've added these compatibility styles to make sure everything still
@@ -2367,23 +2112,6 @@ test(
       @import 'tailwindcss';
       @import './styles/components.css' layer(components);
 
-      /*
-        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;
-        }
-      }
-
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
         so we've added these compatibility styles to make sure everything still
@@ -2609,23 +2337,6 @@ test(
         --radius-sm: var(--custom-rounded-sm);
       }
 
-      /*
-        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;
-        }
-      }
-
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
         so we've added these compatibility styles to make sure everything still
@@ -2710,23 +2421,6 @@ test(
       --- index.css ---
       @import 'tailwindcss';
 
-      /*
-        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;
-        }
-      }
-
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
         so we've added these compatibility styles to make sure everything still
@@ -2840,23 +2534,6 @@ test(
       @import 'tailwindcss/theme' layer(theme);
       @import 'tailwindcss/preflight' layer(base);
 
-      /*
-        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;
-        }
-      }
-
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
         so we've added these compatibility styles to make sure everything still
@@ -3035,23 +2712,6 @@ test(
         --opacity-100\\%: 100%;
       }
 
-      /*
-        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;
-        }
-      }
-
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
         so we've added these compatibility styles to make sure everything still
diff --git a/integrations/upgrade/js-config.test.ts b/integrations/upgrade/js-config.test.ts
index 85c8e6025..e0173bcf3 100644
--- a/integrations/upgrade/js-config.test.ts
+++ b/integrations/upgrade/js-config.test.ts
@@ -267,23 +267,6 @@ test(
         }
       }
 
-      /*
-        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;
-        }
-      }
-
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
         so we've added these compatibility styles to make sure everything still
@@ -393,23 +376,6 @@ test(
         is-arr-mixed: null, true, false, 1234567, 1.35, 'foo', 'bar', 'true';
       }
 
-      /*
-        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;
-        }
-      }
-
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
         so we've added these compatibility styles to make sure everything still
@@ -492,23 +458,6 @@ test(
         --color-gray-950: oklch(0.145 0 0);
       }
 
-      /*
-        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;
-        }
-      }
-
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
         so we've added these compatibility styles to make sure everything still
@@ -583,23 +532,6 @@ test(
 
       @config '../tailwind.config.ts';
 
-      /*
-        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;
-        }
-      }
-
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
         so we've added these compatibility styles to make sure everything still
@@ -678,23 +610,6 @@ test(
 
       @config '../tailwind.config.ts';
 
-      /*
-        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;
-        }
-      }
-
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
         so we've added these compatibility styles to make sure everything still
@@ -769,23 +684,6 @@ test(
 
       @config '../tailwind.config.ts';
 
-      /*
-        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;
-        }
-      }
-
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
         so we've added these compatibility styles to make sure everything still
@@ -898,23 +796,6 @@ test(
         --color-primary: red;
       }
 
-      /*
-        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;
-        }
-      }
-
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
         so we've added these compatibility styles to make sure everything still
@@ -940,23 +821,6 @@ test(
         --color-primary: blue;
       }
 
-      /*
-        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;
-        }
-      }
-
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
         so we've added these compatibility styles to make sure everything still
@@ -1034,23 +898,6 @@ test(
         --color-primary: red;
       }
 
-      /*
-        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;
-        }
-      }
-
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
         so we've added these compatibility styles to make sure everything still
@@ -1111,23 +958,6 @@ describe('border compatibility', () => {
         --- src/input.css ---
         @import 'tailwindcss';
 
-        /*
-          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;
-          }
-        }
-
         /*
           The default border color has changed to \`currentColor\` in Tailwind CSS v4,
           so we've added these compatibility styles to make sure everything still
@@ -1190,23 +1020,6 @@ describe('border compatibility', () => {
         --- src/input.css ---
         @import 'tailwindcss';
 
-        /*
-          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;
-          }
-        }
-
         /*
           The default border color has changed to \`currentColor\` in Tailwind CSS v4,
           so we've added these compatibility styles to make sure everything still
@@ -1268,23 +1081,6 @@ describe('border compatibility', () => {
         "
         --- src/input.css ---
         @import 'tailwindcss';
-
-        /*
-          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;
-          }
-        }
         "
       `)
     },
@@ -1328,23 +1124,6 @@ describe('border compatibility', () => {
         --- src/tailwind.css ---
         @import 'tailwindcss';
 
-        /*
-          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;
-          }
-        }
-
         /*
           The default border color has changed to \`currentColor\` in Tailwind CSS v4,
           so we've added these compatibility styles to make sure everything still
@@ -1414,23 +1193,6 @@ describe('border compatibility', () => {
         @import 'tailwindcss/theme' layer(theme);
         @import 'tailwindcss/preflight' layer(base);
 
-        /*
-          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;
-          }
-        }
-
         /*
           The default border color has changed to \`currentColor\` in Tailwind CSS v4,
           so we've added these compatibility styles to make sure everything still
@@ -1549,23 +1311,6 @@ describe('border compatibility', () => {
           --spacing-miami: 1337px;
         }
 
-        /*
-          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;
-          }
-        }
-
         /*
           The default border color has changed to \`currentColor\` in Tailwind CSS v4,
           so we've added these compatibility styles to make sure everything still
@@ -1680,23 +1425,6 @@ describe('border compatibility', () => {
           --spacing-miami: 1337px;
         }
 
-        /*
-          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;
-          }
-        }
-
         /*
           The default border color has changed to \`currentColor\` in Tailwind CSS v4,
           so we've added these compatibility styles to make sure everything still
@@ -1800,23 +1528,6 @@ describe('border compatibility', () => {
           }
         }
 
-        /*
-          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;
-          }
-        }
-
         /*
           The default border color has changed to \`currentColor\` in Tailwind CSS v4,
           so we've added these compatibility styles to make sure everything still
diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
index 2bbee866c..446351106 100644
--- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
@@ -393,11 +393,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     font-feature-settings: var(--default-font-feature-settings, normal);
     font-variation-settings: var(--default-font-variation-settings, normal);
     -webkit-tap-highlight-color: transparent;
-    --lightningcss-light: initial;
-    --lightningcss-dark: ;
-    --lightningcss-light: initial;
-    --lightningcss-dark: ;
-    color-scheme: light;
   }
 
   body {
@@ -496,6 +491,9 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     font-variation-settings: inherit;
     letter-spacing: inherit;
     color: inherit;
+    opacity: 1;
+    background-color: #0000;
+    border-radius: 0;
   }
 
   ::file-selector-button {
@@ -504,6 +502,21 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     font-variation-settings: inherit;
     letter-spacing: inherit;
     color: inherit;
+    opacity: 1;
+    background-color: #0000;
+    border-radius: 0;
+  }
+
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+
+  ::file-selector-button {
+    margin-inline-end: 4px;
   }
 
   ::placeholder {
@@ -588,89 +601,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     height: auto;
   }
 
-  select, textarea, input:where([type="text"], [type="email"], [type="password"], [type="date"], [type="datetime-local"], [type="month"], [type="number"], [type="search"], [type="time"], [type="week"], [type="tel"], [type="url"]) {
-    color: var(--lightningcss-light, #000) var(--lightningcss-dark, #fff);
-    background-color: var(--lightningcss-light, #fff) var(--lightningcss-dark, #ffffff1a);
-    border: 1px solid var(--lightningcss-light, #00000080) var(--lightningcss-dark, #ffffff40);
-    border-radius: 3px;
-    padding-block: 2px;
-    padding-inline: 4px;
-  }
-
-  :where(select:not([multiple], [size])) option, :where(select:not([multiple], [size])) optgroup {
-    color: fieldtext;
-    background-color: field;
-  }
-
-  :where(select:is([multiple], [size])) optgroup {
-    font-weight: bold;
-  }
-
-  :where(select:is([multiple], [size])) optgroup option {
-    padding-inline-start: 20px;
-  }
-
-  select:where(:disabled), textarea:where(:disabled), input:where([type="text"], [type="email"], [type="password"], [type="date"], [type="datetime-local"], [type="month"], [type="number"], [type="search"], [type="time"], [type="week"], [type="tel"], [type="url"]):where(:disabled) {
-    opacity: 1;
-    color: var(--lightningcss-light, #00000080) var(--lightningcss-dark, #ffffff80);
-    background-color: var(--lightningcss-light, #00000006) var(--lightningcss-dark, #ffffff1a);
-    border-color: var(--lightningcss-light, #0003) var(--lightningcss-dark, #ffffff26);
-  }
-
-  button, input:where([type="button"], [type="reset"], [type="submit"]) {
-    color: var(--lightningcss-light, #000) var(--lightningcss-dark, #fff);
-    background-color: var(--lightningcss-light, #0000000d) var(--lightningcss-dark, #fff6);
-    border: 1px solid var(--lightningcss-light, #00000080) var(--lightningcss-dark, #ffffff1a);
-    border-radius: 4px;
-    padding-block: 2px;
-    padding-inline: 4px;
-  }
-
-  ::file-selector-button {
-    color: var(--lightningcss-light, #000) var(--lightningcss-dark, #fff);
-    background-color: var(--lightningcss-light, #0000000d) var(--lightningcss-dark, #fff6);
-    border: 1px solid var(--lightningcss-light, #00000080) var(--lightningcss-dark, #ffffff1a);
-    border-radius: 4px;
-    padding-block: 2px;
-    padding-inline: 4px;
-  }
-
-  button:where(:hover), input:where([type="button"], [type="reset"], [type="submit"]):where(:hover) {
-    background-color: var(--lightningcss-light, #0000001a) var(--lightningcss-dark, #ffffff73);
-  }
-
-  ::file-selector-button:where(:hover) {
-    background-color: var(--lightningcss-light, #0000001a) var(--lightningcss-dark, #ffffff73);
-  }
-
-  button:where(:active), input:where([type="button"], [type="reset"], [type="submit"]):where(:active) {
-    background-color: var(--lightningcss-light, #00000006) var(--lightningcss-dark, #ffffff4d);
-  }
-
-  ::file-selector-button:where(:active) {
-    background-color: var(--lightningcss-light, #00000006) var(--lightningcss-dark, #ffffff4d);
-  }
-
-  button:where(:disabled), input:where([type="button"], [type="reset"], [type="submit"]):where(:disabled) {
-    opacity: 1;
-    background-color: var(--lightningcss-light, #00000006) var(--lightningcss-dark, #ffffff40);
-    border-color: var(--lightningcss-light, #0003) var(--lightningcss-dark, #ffffff1a);
-  }
-
-  :where(input:disabled)::file-selector-button {
-    opacity: 1;
-    background-color: var(--lightningcss-light, #00000006) var(--lightningcss-dark, #ffffff40);
-    border-color: var(--lightningcss-light, #0003) var(--lightningcss-dark, #ffffff1a);
-  }
-
-  input:where([type="file"]:disabled) {
-    color: var(--lightningcss-light, #00000080) var(--lightningcss-dark, #ffffff80);
-  }
-
-  ::file-selector-button {
-    margin-inline-end: 4px;
-  }
-
   [hidden]:where(:not([hidden="until-found"])) {
     display: none !important;
   }
diff --git a/packages/@tailwindcss-upgrade/src/codemods/migrate-preflight.test.ts b/packages/@tailwindcss-upgrade/src/codemods/migrate-preflight.test.ts
index afbc0eadf..21793e1ed 100644
--- a/packages/@tailwindcss-upgrade/src/codemods/migrate-preflight.test.ts
+++ b/packages/@tailwindcss-upgrade/src/codemods/migrate-preflight.test.ts
@@ -32,23 +32,6 @@ it("should add compatibility CSS after the `@import 'tailwindcss'`", async () =>
   ).toMatchInlineSnapshot(`
     "@import 'tailwindcss';
 
-    /*
-      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;
-      }
-    }
-
     /*
       The default border color has changed to \`currentColor\` in Tailwind CSS v4,
       so we've added these compatibility styles to make sure everything still
@@ -81,23 +64,6 @@ it('should add the compatibility CSS after the last `@import`', async () => {
     @import './foo.css';
     @import './bar.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;
-      }
-    }
-
     /*
       The default border color has changed to \`currentColor\` in Tailwind CSS v4,
       so we've added these compatibility styles to make sure everything still
@@ -144,23 +110,6 @@ it('should add the compatibility CSS after the last import, even if a body-less
     @import './foo.css';
     @import './bar.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;
-      }
-    }
-
     /*
       The default border color has changed to \`currentColor\` in Tailwind CSS v4,
       so we've added these compatibility styles to make sure everything still
@@ -207,23 +156,6 @@ it('should add the compatibility CSS before the first `@layer base` (if the "tai
     @variant foo {
     }
 
-    /*
-      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;
-      }
-    }
-
     /*
       The default border color has changed to \`currentColor\` in Tailwind CSS v4,
       so we've added these compatibility styles to make sure everything still
@@ -282,23 +214,6 @@ it('should add the compatibility CSS before the first `@layer base` (if the "tai
     @variant foo {
     }
 
-    /*
-      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;
-      }
-    }
-
     /*
       The default border color has changed to \`currentColor\` in Tailwind CSS v4,
       so we've added these compatibility styles to make sure everything still
diff --git a/packages/@tailwindcss-upgrade/src/codemods/migrate-preflight.ts b/packages/@tailwindcss-upgrade/src/codemods/migrate-preflight.ts
index 3d3635d01..8677d6af6 100644
--- a/packages/@tailwindcss-upgrade/src/codemods/migrate-preflight.ts
+++ b/packages/@tailwindcss-upgrade/src/codemods/migrate-preflight.ts
@@ -30,25 +30,6 @@ const BORDER_COLOR_COMPATIBILITY_CSS = css`
   }
 `
 
-const FORMS_RESET_CSS = 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;
-    }
-  }
-`
-
 export function migratePreflight({
   designSystem,
   userConfig,
@@ -79,7 +60,7 @@ export function migratePreflight({
     if (!isTailwindRoot) return
 
     // Figure out the compatibility CSS to inject
-    let compatibilityCssString = FORMS_RESET_CSS + '\n\n'
+    let compatibilityCssString = ''
     if (defaultBorderColor !== DEFAULT_BORDER_COLOR) {
       compatibilityCssString += BORDER_COLOR_COMPATIBILITY_CSS
       compatibilityCssString += '\n\n'
diff --git a/packages/@tailwindcss-upgrade/src/index.test.ts b/packages/@tailwindcss-upgrade/src/index.test.ts
index 7ab1ec2bd..65d74937b 100644
--- a/packages/@tailwindcss-upgrade/src/index.test.ts
+++ b/packages/@tailwindcss-upgrade/src/index.test.ts
@@ -96,23 +96,6 @@ it('should migrate a stylesheet', async () => {
   ).toMatchInlineSnapshot(`
     "@import 'tailwindcss';
 
-    /*
-      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;
-      }
-    }
-
     /*
       The default border color has changed to \`currentColor\` in Tailwind CSS v4,
       so we've added these compatibility styles to make sure everything still
@@ -184,23 +167,6 @@ it('should migrate a stylesheet (with imports)', async () => {
     @import './my-components.css' layer(components);
     @import './my-utilities.css' layer(utilities);
 
-    /*
-      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;
-      }
-    }
-
     /*
       The default border color has changed to \`currentColor\` in Tailwind CSS v4,
       so we've added these compatibility styles to make sure everything still
@@ -243,23 +209,6 @@ it('should migrate a stylesheet (with preceding rules that should be wrapped in
     /**! My license comment */
     @import 'tailwindcss';
 
-    /*
-      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;
-      }
-    }
-
     /*
       The default border color has changed to \`currentColor\` in Tailwind CSS v4,
       so we've added these compatibility styles to make sure everything still
diff --git a/packages/tailwindcss/preflight.css b/packages/tailwindcss/preflight.css
index 7ccadd35d..f8fe93f22 100644
--- a/packages/tailwindcss/preflight.css
+++ b/packages/tailwindcss/preflight.css
@@ -23,7 +23,6 @@
   5. Use the user's configured `sans` font-feature-settings by default.
   6. Use the user's configured `sans` font-variation-settings by default.
   7. Disable tap highlights on iOS.
-  8. Set a default `color-scheme`.
 */
 
 html,
@@ -44,7 +43,6 @@ html,
   font-feature-settings: var(--default-font-feature-settings, normal); /* 5 */
   font-variation-settings: var(--default-font-variation-settings, normal); /* 6 */
   -webkit-tap-highlight-color: transparent; /* 7 */
-  color-scheme: light; /* 8 */
 }
 
 /*
@@ -239,7 +237,10 @@ video {
 }
 
 /*
-  Inherit font styles in all browsers.
+  1. Inherit font styles in all browsers.
+  2. Remove border radius in all browsers.
+  3. Remove background color in all browsers.
+  4. Ensure consistent opacity for disabled states in all browsers.
 */
 
 button,
@@ -248,11 +249,38 @@ select,
 optgroup,
 textarea,
 ::file-selector-button {
-  font: inherit;
-  font-feature-settings: inherit;
-  font-variation-settings: inherit;
-  letter-spacing: inherit;
-  color: inherit;
+  font: inherit; /* 1 */
+  font-feature-settings: inherit; /* 1 */
+  font-variation-settings: inherit; /* 1 */
+  letter-spacing: inherit; /* 1 */
+  color: inherit; /* 1 */
+  border-radius: 0; /* 2 */
+  background-color: transparent; /* 3 */
+  opacity: 1; /* 4 */
+}
+
+/*
+  Restore default font weight.
+*/
+
+:where(select:is([multiple], [size])) optgroup {
+  font-weight: bolder;
+}
+
+/*
+  Restore indentation.
+*/
+
+:where(select:is([multiple], [size])) optgroup option {
+  padding-inline-start: 20px;
+}
+
+/*
+  Restore space after button.
+*/
+
+::file-selector-button {
+  margin-inline-end: 4px;
 }
 
 /*
@@ -346,113 +374,6 @@ input:where([type='button'], [type='reset'], [type='submit']),
   height: auto;
 }
 
-/*
-  Apply consistent base form control styles across browsers.
-*/
-
-select,
-textarea,
-input:where(
-    [type='text'],
-    [type='email'],
-    [type='password'],
-    [type='date'],
-    [type='datetime-local'],
-    [type='month'],
-    [type='number'],
-    [type='search'],
-    [type='time'],
-    [type='week'],
-    [type='tel'],
-    [type='url']
-  ) {
-  border-radius: 3px;
-  padding-inline: 4px;
-  padding-block: 2px;
-  color: light-dark(black, white);
-  background-color: light-dark(white, rgb(255 255 255 / 10%));
-  border: 1px solid light-dark(rgb(0 0 0 / 50%), rgb(255 255 255 / 25%));
-}
-
-:where(select:not([multiple], [size])) option,
-:where(select:not([multiple], [size])) optgroup {
-  color: FieldText;
-  background-color: Field;
-}
-
-:where(select:is([multiple], [size])) optgroup {
-  font-weight: bold;
-}
-
-:where(select:is([multiple], [size])) optgroup option {
-  padding-inline-start: 20px;
-}
-
-select:where(:disabled),
-textarea:where(:disabled),
-input:where(
-    [type='text'],
-    [type='email'],
-    [type='password'],
-    [type='date'],
-    [type='datetime-local'],
-    [type='month'],
-    [type='number'],
-    [type='search'],
-    [type='time'],
-    [type='week'],
-    [type='tel'],
-    [type='url']
-  ):where(:disabled) {
-  opacity: 1;
-  color: light-dark(rgb(0 0 0 / 50%), rgb(255 255 255 / 50%));
-  background-color: light-dark(rgb(0 0 0 / 2.5%), rgb(255 255 255 / 10%));
-  border-color: light-dark(rgb(0 0 0 / 20%), rgb(255 255 255 / 15%));
-}
-
-/*
-  Apply consistent base button styles across browsers.
-*/
-
-button,
-::file-selector-button,
-input:where([type='button'], [type='reset'], [type='submit']) {
-  border-radius: 4px;
-  padding-inline: 4px;
-  padding-block: 2px;
-  color: light-dark(#000, #fff);
-  background-color: light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 40%));
-  border: 1px solid light-dark(rgb(0 0 0 / 50%), rgb(255 255 255 / 10%));
-}
-
-button:where(:hover),
-::file-selector-button:where(:hover),
-input:where([type='button'], [type='reset'], [type='submit']):where(:hover) {
-  background-color: light-dark(rgb(0 0 0 / 10%), rgb(255 255 255 / 45%));
-}
-
-button:where(:active),
-::file-selector-button:where(:active),
-input:where([type='button'], [type='reset'], [type='submit']):where(:active) {
-  background-color: light-dark(rgb(0 0 0 / 2.5%), rgb(255 255 255 / 30%));
-}
-
-button:where(:disabled),
-:where(input:disabled)::file-selector-button,
-input:where([type='button'], [type='reset'], [type='submit']):where(:disabled) {
-  opacity: 1;
-  background-color: light-dark(rgb(0 0 0 / 2.5%), rgb(255 255 255 / 25%));
-  border-color: light-dark(rgb(0 0 0 / 20%), rgb(255 255 255 / 10%));
-}
-
-input:where([type='file']:disabled) {
-  color: light-dark(rgb(0 0 0 / 50%), rgb(255 255 255 / 50%));
-}
-
-::file-selector-button {
-  margin-inline-end: 4px;
-}
-
 /*
   Make elements with the HTML hidden attribute stay hidden by default.
 */