From d9e5a830275428f98f49526489ff59f258612056 Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Mon, 11 Nov 2024 11:47:27 -0500 Subject: [PATCH 1/3] Don't reset horizontal padding on date/time pseudo-elements --- .../src/__snapshots__/index.test.ts.snap | 35 ++++++++++++------- packages/tailwindcss/preflight.css | 13 +++++-- 2 files changed, 32 insertions(+), 16 deletions(-) diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap index 7900be58753d..a51c34945552 100644 --- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap +++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap @@ -518,44 +518,53 @@ 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-top: 0; + padding-bottom: 0; + } + ::-webkit-datetime-edit-year-field { - padding: 0; + padding-top: 0; + padding-bottom: 0; } ::-webkit-datetime-edit-month-field { - padding: 0; + padding-top: 0; + padding-bottom: 0; } ::-webkit-datetime-edit-day-field { - padding: 0; + padding-top: 0; + padding-bottom: 0; } ::-webkit-datetime-edit-hour-field { - padding: 0; + padding-top: 0; + padding-bottom: 0; } ::-webkit-datetime-edit-minute-field { - padding: 0; + padding-top: 0; + padding-bottom: 0; } ::-webkit-datetime-edit-second-field { - padding: 0; + padding-top: 0; + padding-bottom: 0; } ::-webkit-datetime-edit-millisecond-field { - padding: 0; + padding-top: 0; + padding-bottom: 0; } ::-webkit-datetime-edit-meridiem-field { - padding: 0; - } - - ::-webkit-datetime-edit-fields-wrapper { - padding: 0; + padding-top: 0; + padding-bottom: 0; } summary { diff --git a/packages/tailwindcss/preflight.css b/packages/tailwindcss/preflight.css index 392eb1b2f064..f2153703d4c2 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,9 @@ 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-top: 0; + padding-bottom: 0; } /* From 708fb3497b75f61f38c0a3410144f1d9ad828a4d Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Mon, 11 Nov 2024 12:02:30 -0500 Subject: [PATCH 2/3] Use padding-block --- .../src/__snapshots__/index.test.ts.snap | 27 +++++++------------ packages/tailwindcss/preflight.css | 3 +-- 2 files changed, 10 insertions(+), 20 deletions(-) diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap index a51c34945552..17c977f96e35 100644 --- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap +++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap @@ -523,48 +523,39 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` } ::-webkit-datetime-edit { - padding-top: 0; - padding-bottom: 0; + padding-block: 0; } ::-webkit-datetime-edit-year-field { - padding-top: 0; - padding-bottom: 0; + padding-block: 0; } ::-webkit-datetime-edit-month-field { - padding-top: 0; - padding-bottom: 0; + padding-block: 0; } ::-webkit-datetime-edit-day-field { - padding-top: 0; - padding-bottom: 0; + padding-block: 0; } ::-webkit-datetime-edit-hour-field { - padding-top: 0; - padding-bottom: 0; + padding-block: 0; } ::-webkit-datetime-edit-minute-field { - padding-top: 0; - padding-bottom: 0; + padding-block: 0; } ::-webkit-datetime-edit-second-field { - padding-top: 0; - padding-bottom: 0; + padding-block: 0; } ::-webkit-datetime-edit-millisecond-field { - padding-top: 0; - padding-bottom: 0; + padding-block: 0; } ::-webkit-datetime-edit-meridiem-field { - padding-top: 0; - padding-bottom: 0; + padding-block: 0; } summary { diff --git a/packages/tailwindcss/preflight.css b/packages/tailwindcss/preflight.css index f2153703d4c2..6b8cbbae41db 100644 --- a/packages/tailwindcss/preflight.css +++ b/packages/tailwindcss/preflight.css @@ -279,8 +279,7 @@ progress { ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { - padding-top: 0; - padding-bottom: 0; + padding-block: 0; } /* From 3e55c8ba4c447b338e8cd3bd812abb44d9b34320 Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Mon, 11 Nov 2024 13:10:16 -0500 Subject: [PATCH 3/3] Update changelog --- CHANGELOG.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 24ccb2d97660..b8c5580ab535 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