Normalize date/time input styles

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `svh`, `dvh`, `svw`, `dvw`, and `auto` values to all width/height/size utilities ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857))
 - Add new `**` variant ([#14903](https://github.com/tailwindlabs/tailwindcss/pull/14903))
 - Process `<style>` blocks inside Svelte files when using the Vite extension ([#14151](https://github.com/tailwindlabs/tailwindcss/pull/14151))
+- Normalize date/time input styles in Preflight ([#14931](https://github.com/tailwindlabs/tailwindcss/pull/14931))
 - _Upgrade (experimental)_: Migrate `grid-cols-[subgrid]` and `grid-rows-[subgrid]` to `grid-cols-subgrid` and `grid-rows-subgrid` ([#14840](https://github.com/tailwindlabs/tailwindcss/pull/14840))
 - _Upgrade (experimental)_: Support migrating projects with multiple config files ([#14863](https://github.com/tailwindlabs/tailwindcss/pull/14863))
 - _Upgrade (experimental)_: Rename `shadow` to `shadow-sm`, `shadow-sm` to `shadow-xs`, and `shadow-xs` to `shadow-2xs` ([#14875](https://github.com/tailwindlabs/tailwindcss/pull/14875))

packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap

@@ -511,6 +511,55 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     -webkit-appearance: none;
   }
 
+  ::-webkit-date-and-time-value {
+    text-align: inherit;
+    min-height: 1lh;
+  }
+
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+
+  ::-webkit-datetime-edit {
+    padding: 0;
+  }
+
+  ::-webkit-datetime-edit-year-field {
+    padding: 0;
+  }
+
+  ::-webkit-datetime-edit-month-field {
+    padding: 0;
+  }
+
+  ::-webkit-datetime-edit-day-field {
+    padding: 0;
+  }
+
+  ::-webkit-datetime-edit-hour-field {
+    padding: 0;
+  }
+
+  ::-webkit-datetime-edit-minute-field {
+    padding: 0;
+  }
+
+  ::-webkit-datetime-edit-second-field {
+    padding: 0;
+  }
+
+  ::-webkit-datetime-edit-millisecond-field {
+    padding: 0;
+  }
+
+  ::-webkit-datetime-edit-meridiem-field {
+    padding: 0;
+  }
+
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+
   summary {
     display: list-item;
   }

packages/tailwindcss/preflight.css

@@ -244,6 +244,38 @@ progress {
   -webkit-appearance: none;
 }
 
+/*
+  1. Ensure date/time inputs have the same height when empty in on 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 */
+}
+
+/*
+  Prevent height from changing on date/time inputs on macOS Safari when the input is set to `display: block`.
+*/
+::-webkit-datetime-edit {
+  display: inline-flex;
+}
+
+/*
+  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
+*/
+::-webkit-datetime-edit,
+::-webkit-datetime-edit-year-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-hour-field,
+::-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;
+}
+
 /*
   Add the correct display in Chrome and Safari.
 */