From 49b658f0f865e292911caf484c7a7551959522a6 Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Tue, 12 Nov 2024 17:39:53 +0100
Subject: [PATCH] Align empty date/time inputs in Safari iOS

---
 .../src/__snapshots__/index.test.ts.snap       |  6 ++++++
 packages/tailwindcss/preflight.css             | 18 ++++++++++++++----
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
index 17c977f96e35..f9acf2ae0b0b 100644
--- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
@@ -509,9 +509,15 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     -webkit-appearance: none;
   }
 
+  input:where([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]) {
+    display: inline-block;
+  }
+
   ::-webkit-date-and-time-value {
+    vertical-align: middle;
     text-align: inherit;
     min-height: 1lh;
+    display: inline-block;
   }
 
   ::-webkit-datetime-edit {
diff --git a/packages/tailwindcss/preflight.css b/packages/tailwindcss/preflight.css
index 6b8cbbae41db..1367429a38be 100644
--- a/packages/tailwindcss/preflight.css
+++ b/packages/tailwindcss/preflight.css
@@ -245,13 +245,23 @@ 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.
+  Ensure the empty date/time inputs are correctly aligned in iOS Safari.
+*/
+input:where([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]) {
+  display: inline-block;
+}
+
+/*
+  1. Ensure the empty date/time inputs are correctly aligned in iOS Safari.
+  2. Ensure date/time inputs have the same height when empty in iOS Safari.
+  3. 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 */
+  vertical-align: middle; /* 1 */
+  min-height: 1lh; /* 2 */
+  text-align: inherit; /* 3 */
+  display: inline-block; /* 1 */
 }
 
 /*