diff --git a/integrations/cli/index.test.ts b/integrations/cli/index.test.ts
index 409a9de7cd41..85f8a7c3b805 100644
--- a/integrations/cli/index.test.ts
+++ b/integrations/cli/index.test.ts
@@ -2419,7 +2419,6 @@ test(
           letter-spacing: inherit;
           color: inherit;
           border-radius: 0;
-          background-color: transparent;
           opacity: 1;
         }
         :where(select:is([multiple], [size])) optgroup {
@@ -2468,6 +2467,7 @@ test(
           box-shadow: none;
         }
         button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
+          background-color: transparent;
           appearance: button;
         }
         ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
index fd6db912cf4a..48a934934140 100644
--- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
@@ -142,7 +142,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     letter-spacing: inherit;
     color: inherit;
     opacity: 1;
-    background-color: #0000;
     border-radius: 0;
   }
 
@@ -153,7 +152,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     letter-spacing: inherit;
     color: inherit;
     opacity: 1;
-    background-color: #0000;
     border-radius: 0;
   }
 
@@ -252,10 +250,12 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
 
   button, input:where([type="button"], [type="reset"], [type="submit"]) {
     appearance: button;
+    background-color: #0000;
   }
 
   ::file-selector-button {
     appearance: button;
+    background-color: #0000;
   }
 
   ::-webkit-inner-spin-button {
diff --git a/packages/tailwindcss/preflight.css b/packages/tailwindcss/preflight.css
index 753e79ef0d0f..d3f10b530dff 100644
--- a/packages/tailwindcss/preflight.css
+++ b/packages/tailwindcss/preflight.css
@@ -231,8 +231,7 @@ video {
 /*
   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.
+  3. Ensure consistent opacity for disabled states in all browsers.
 */
 
 button,
@@ -247,8 +246,7 @@ textarea,
   letter-spacing: inherit; /* 1 */
   color: inherit; /* 1 */
   border-radius: 0; /* 2 */
-  background-color: transparent; /* 3 */
-  opacity: 1; /* 4 */
+  opacity: 1; /* 3 */
 }
 
 /*
@@ -366,13 +364,15 @@ textarea {
 }
 
 /*
-  Correct the inability to style the border radius in iOS Safari.
+  1. Remove the default background color of buttons.
+  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-color: transparent; /* 1 */
+  appearance: button; /* 2 */
 }
 
 /*
diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
index 88365b1ce156..3f876985da03 100644
--- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
@@ -256,7 +256,6 @@ exports[`compiling CSS > prefix all CSS variables inside preflight 1`] = `
     letter-spacing: inherit;
     color: inherit;
     opacity: 1;
-    background-color: #0000;
     border-radius: 0;
   }
 
@@ -267,7 +266,6 @@ exports[`compiling CSS > prefix all CSS variables inside preflight 1`] = `
     letter-spacing: inherit;
     color: inherit;
     opacity: 1;
-    background-color: #0000;
     border-radius: 0;
   }
 
@@ -366,10 +364,12 @@ exports[`compiling CSS > prefix all CSS variables inside preflight 1`] = `
 
   button, input:where([type="button"], [type="reset"], [type="submit"]) {
     appearance: button;
+    background-color: #0000;
   }
 
   ::file-selector-button {
     appearance: button;
+    background-color: #0000;
   }
 
   ::-webkit-inner-spin-button {
diff --git a/packages/tailwindcss/src/source-maps/source-map.test.ts b/packages/tailwindcss/src/source-maps/source-map.test.ts
index 02d8a434acb4..d84bc1f1694c 100644
--- a/packages/tailwindcss/src/source-maps/source-map.test.ts
+++ b/packages/tailwindcss/src/source-maps/source-map.test.ts
@@ -244,46 +244,46 @@ test('source maps trace back to @import location', async ({ expect }) => {
     'preflight.css: 91:2-13 <- 225:0-226:6',
     'preflight.css: 92:4-19 <- 227:2-17',
     'preflight.css: 93:4-16 <- 228:2-14',
-    'preflight.css: 95:2-68 <- 238:0-243:23',
-    'preflight.css: 96:4-17 <- 244:2-15',
-    'preflight.css: 97:4-34 <- 245:2-32',
-    'preflight.css: 98:4-36 <- 246:2-34',
-    'preflight.css: 99:4-27 <- 247:2-25',
-    'preflight.css: 100:4-18 <- 248:2-16',
-    'preflight.css: 101:4-20 <- 249:2-18',
-    'preflight.css: 102:4-33 <- 250:2-31',
-    'preflight.css: 103:4-14 <- 251:2-12',
-    'preflight.css: 105:2-49 <- 258:0-47',
-    'preflight.css: 106:4-23 <- 259:2-21',
-    'preflight.css: 108:2-56 <- 266:0-54',
-    'preflight.css: 109:4-30 <- 267:2-28',
-    'preflight.css: 111:2-25 <- 274:0-23',
-    'preflight.css: 112:4-26 <- 275:2-24',
-    'preflight.css: 114:2-16 <- 282:0-14',
-    'preflight.css: 115:4-14 <- 283:2-12',
-    'preflight.css: 117:2-92 <- 291:0-292:49',
-    'preflight.css: 118:4-18 <- 293:2-16',
-    'preflight.css: 119:6-25 <- 294:4-61',
-    'preflight.css: 120:6-53 <- 294:4-61',
-    'preflight.css: 121:8-65 <- 294:4-61',
-    'preflight.css: 125:2-11 <- 302:0-9',
-    'preflight.css: 126:4-20 <- 303:2-18',
-    'preflight.css: 128:2-30 <- 310:0-28',
-    'preflight.css: 129:4-28 <- 311:2-26',
-    'preflight.css: 131:2-32 <- 319:0-30',
-    'preflight.css: 132:4-19 <- 320:2-17',
-    'preflight.css: 133:4-23 <- 321:2-21',
-    'preflight.css: 135:2-26 <- 328:0-24',
-    'preflight.css: 136:4-24 <- 329:2-22',
-    'preflight.css: 138:2-41 <- 336:0-39',
-    'preflight.css: 139:4-14 <- 337:2-12',
-    'preflight.css: 141:2-329 <- 340:0-348:39',
-    'preflight.css: 142:4-20 <- 349:2-18',
-    'preflight.css: 144:2-38 <- 356:0-36',
-    'preflight.css: 145:4-18 <- 357:2-16',
-    'preflight.css: 147:2-19 <- 364:0-17',
-    'preflight.css: 148:4-20 <- 365:2-18',
-    'preflight.css: 150:2-96 <- 372:0-374:23',
+    'preflight.css: 95:2-68 <- 237:0-242:23',
+    'preflight.css: 96:4-17 <- 243:2-15',
+    'preflight.css: 97:4-34 <- 244:2-32',
+    'preflight.css: 98:4-36 <- 245:2-34',
+    'preflight.css: 99:4-27 <- 246:2-25',
+    'preflight.css: 100:4-18 <- 247:2-16',
+    'preflight.css: 101:4-20 <- 248:2-18',
+    'preflight.css: 102:4-14 <- 249:2-12',
+    'preflight.css: 104:2-49 <- 256:0-47',
+    'preflight.css: 105:4-23 <- 257:2-21',
+    'preflight.css: 107:2-56 <- 264:0-54',
+    'preflight.css: 108:4-30 <- 265:2-28',
+    'preflight.css: 110:2-25 <- 272:0-23',
+    'preflight.css: 111:4-26 <- 273:2-24',
+    'preflight.css: 113:2-16 <- 280:0-14',
+    'preflight.css: 114:4-14 <- 281:2-12',
+    'preflight.css: 116:2-92 <- 289:0-290:49',
+    'preflight.css: 117:4-18 <- 291:2-16',
+    'preflight.css: 118:6-25 <- 292:4-61',
+    'preflight.css: 119:6-53 <- 292:4-61',
+    'preflight.css: 120:8-65 <- 292:4-61',
+    'preflight.css: 124:2-11 <- 300:0-9',
+    'preflight.css: 125:4-20 <- 301:2-18',
+    'preflight.css: 127:2-30 <- 308:0-28',
+    'preflight.css: 128:4-28 <- 309:2-26',
+    'preflight.css: 130:2-32 <- 317:0-30',
+    'preflight.css: 131:4-19 <- 318:2-17',
+    'preflight.css: 132:4-23 <- 319:2-21',
+    'preflight.css: 134:2-26 <- 326:0-24',
+    'preflight.css: 135:4-24 <- 327:2-22',
+    'preflight.css: 137:2-41 <- 334:0-39',
+    'preflight.css: 138:4-14 <- 335:2-12',
+    'preflight.css: 140:2-329 <- 338:0-346:39',
+    'preflight.css: 141:4-20 <- 347:2-18',
+    'preflight.css: 143:2-38 <- 354:0-36',
+    'preflight.css: 144:4-18 <- 355:2-16',
+    'preflight.css: 146:2-19 <- 362:0-17',
+    'preflight.css: 147:4-20 <- 363:2-18',
+    'preflight.css: 149:2-96 <- 371:0-373:23',
+    'preflight.css: 150:4-33 <- 374:2-31',
     'preflight.css: 151:4-22 <- 375:2-20',
     'preflight.css: 153:2-59 <- 382:0-383:28',
     'preflight.css: 154:4-16 <- 384:2-14',