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 diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap index 7900be58753d..17c977f96e35 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 392eb1b2f064..6b8cbbae41db 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; } /*