From 50d7355f7f81939172af1161e0930dc381d599ca Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 11 Nov 2024 13:11:28 -0500
Subject: [PATCH] Don't reset horizontal padding on date/time pseudo-elements
 (#14959)

Turns out all of these date/time pseudo elements have a bit of
horizontal padding on them that we don't want to throw away when fixing
the height issue, so this PR updates our reset to only remove vertical
padding.

Here's a demo showing the difference, test in Safari or Chrome to see
the difference in horizontal spacing:

https://play.tailwindcss.com/Opwa7pkDFP?file=css

---------

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 24ccb2d97..b8c5580ab 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Don't reset horizontal padding on date/time pseudo-elements ([#14959](https://github.com/tailwindlabs/tailwindcss/pull/14959))
 
 ## [4.0.0-alpha.32] - 2024-11-11
 
diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
index 7900be587..17c977f96 100644
--- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
@@ -518,44 +518,44 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     display: inline-flex;
   }
 
-  ::-webkit-datetime-edit {
+  ::-webkit-datetime-edit-fields-wrapper {
     padding: 0;
   }
 
+  ::-webkit-datetime-edit {
+    padding-block: 0;
+  }
+
   ::-webkit-datetime-edit-year-field {
-    padding: 0;
+    padding-block: 0;
   }
 
   ::-webkit-datetime-edit-month-field {
-    padding: 0;
+    padding-block: 0;
   }
 
   ::-webkit-datetime-edit-day-field {
-    padding: 0;
+    padding-block: 0;
   }
 
   ::-webkit-datetime-edit-hour-field {
-    padding: 0;
+    padding-block: 0;
   }
 
   ::-webkit-datetime-edit-minute-field {
-    padding: 0;
+    padding-block: 0;
   }
 
   ::-webkit-datetime-edit-second-field {
-    padding: 0;
+    padding-block: 0;
   }
 
   ::-webkit-datetime-edit-millisecond-field {
-    padding: 0;
+    padding-block: 0;
   }
 
   ::-webkit-datetime-edit-meridiem-field {
-    padding: 0;
-  }
-
-  ::-webkit-datetime-edit-fields-wrapper {
-    padding: 0;
+    padding-block: 0;
   }
 
   summary {
diff --git a/packages/tailwindcss/preflight.css b/packages/tailwindcss/preflight.css
index 392eb1b2f..6b8cbbae4 100644
--- a/packages/tailwindcss/preflight.css
+++ b/packages/tailwindcss/preflight.css
@@ -248,6 +248,7 @@ progress {
   1. Ensure date/time inputs have the same height when empty in iOS Safari.
   2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
 */
+
 ::-webkit-date-and-time-value {
   min-height: 1lh; /* 1 */
   text-align: inherit; /* 2 */
@@ -256,6 +257,7 @@ progress {
 /*
   Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
 */
+
 ::-webkit-datetime-edit {
   display: inline-flex;
 }
@@ -263,6 +265,11 @@ progress {
 /*
   Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
 */
+
+::-webkit-datetime-edit-fields-wrapper {
+  padding: 0;
+}
+
 ::-webkit-datetime-edit,
 ::-webkit-datetime-edit-year-field,
 ::-webkit-datetime-edit-month-field,
@@ -271,9 +278,8 @@ progress {
 ::-webkit-datetime-edit-minute-field,
 ::-webkit-datetime-edit-second-field,
 ::-webkit-datetime-edit-millisecond-field,
-::-webkit-datetime-edit-meridiem-field,
-::-webkit-datetime-edit-fields-wrapper {
-  padding: 0;
+::-webkit-datetime-edit-meridiem-field {
+  padding-block: 0;
 }
 
 /*