From 192109bd01e72b0720187ee99bc0f2389cb25305 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Fri, 8 Nov 2024 10:19:29 -0500
Subject: [PATCH] Don't give input elements a transparent background by default
 (#14913)

Early in v4 development we decided to give all form controls a
transparent background, but in v3 we only did this for button elements.

This PR reverts that decision to make things consistent with v3, as
we've noticed this is something that tends to break for people when
upgrading from v3 to v4.

The default background color of form elements is the [`Field` system
color](https://developer.mozilla.org/en-US/docs/Web/CSS/system-color#field)
which automatically adapts to light and dark modes if you don't touch
it, so it feels reasonable to keep this as the default. Changing it just
makes upgrading harder and doesn't really make anything easier for
anyone else.

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
---
 CHANGELOG.md                                  |  1 +
 .../src/__snapshots__/index.test.ts.snap      |  4 ++--
 packages/tailwindcss/preflight.css            | 21 ++++++++++---------
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4449f4603..e0887e203 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -34,6 +34,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure the CSS `theme()` function handles newlines and tabs in its arguments list ([#14917](https://github.com/tailwindlabs/tailwindcss/pull/14917))
 - Don't unset keys like `--inset-shadow-*` when unsetting keys like `--inset-*` ([#14906](https://github.com/tailwindlabs/tailwindcss/pull/14906))
 - Ensure spacing utilities with no value (e.g. `px` or `translate-y`) don't generate CSS ([#14911](https://github.com/tailwindlabs/tailwindcss/pull/14911))
+- Don't override user-agent background color for input elements in Preflight ([#14913](https://github.com/tailwindlabs/tailwindcss/pull/14913))
 - Don't attempt to convert CSS variables (which should already be percentages) to percentages when used as opacity modifiers ([#14916](https://github.com/tailwindlabs/tailwindcss/pull/14916))
 - _Upgrade (experimental)_: Install `@tailwindcss/postcss` next to `tailwindcss` ([#14830](https://github.com/tailwindlabs/tailwindcss/pull/14830))
 - _Upgrade (experimental)_: Remove whitespace around `,` separator when print arbitrary values ([#14838](https://github.com/tailwindlabs/tailwindcss/pull/14838))
diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
index 24d0c8fa4..ad9c3ff71 100644
--- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
@@ -467,7 +467,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     font-variation-settings: inherit;
     letter-spacing: inherit;
     color: inherit;
-    background: none;
   }
 
   ::file-selector-button {
@@ -476,7 +475,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     font-variation-settings: inherit;
     letter-spacing: inherit;
     color: inherit;
-    background: none;
   }
 
   input:where(:not([type="button"], [type="reset"], [type="submit"])), select, textarea {
@@ -485,10 +483,12 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
 
   button, input:where([type="button"], [type="reset"], [type="submit"]) {
     appearance: button;
+    background: none;
   }
 
   ::file-selector-button {
     appearance: button;
+    background: none;
   }
 
   :-moz-focusring {
diff --git a/packages/tailwindcss/preflight.css b/packages/tailwindcss/preflight.css
index 6e57b9faa..cafbaffb1 100644
--- a/packages/tailwindcss/preflight.css
+++ b/packages/tailwindcss/preflight.css
@@ -175,8 +175,7 @@ table {
 }
 
 /*
-  1. Inherit the font styles in all browsers.
-  2. Remove the default background color.
+  Inherit font styles in all browsers.
 */
 
 button,
@@ -185,12 +184,11 @@ optgroup,
 select,
 textarea,
 ::file-selector-button {
-  font: inherit; /* 1 */
-  font-feature-settings: inherit; /* 1 */
-  font-variation-settings: inherit; /* 1 */
-  letter-spacing: inherit; /* 1 */
-  color: inherit; /* 1 */
-  background: transparent; /* 2 */
+  font: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  letter-spacing: inherit;
+  color: inherit;
 }
 
 /*
@@ -204,12 +202,15 @@ textarea {
 }
 
 /*
-  Correct the inability to style the border radius in iOS Safari.
+  1. Remove the default background color of buttons by default.
+  2. Correct the inability to style the border radius in iOS Safari.
 */
+
 button,
 input:where([type='button'], [type='reset'], [type='submit']),
 ::file-selector-button {
-  appearance: button;
+  background: transparent; /* 1 */
+  appearance: button; /* 2 */
 }
 
 /*