diff --git a/CHANGELOG.md b/CHANGELOG.md index 0328de5..4ec0890 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Use `addComponents` for class strategy ([#91](https://github.com/tailwindlabs/tailwindcss-forms/pull/91)) +- Fix extra height on Safari date/time inputs ([#109](https://github.com/tailwindlabs/tailwindcss-forms/pull/109)) ## [0.4.0] - 2021-12-09 diff --git a/src/index.js b/src/index.js index 02f5394..d081e4b 100644 --- a/src/index.js +++ b/src/index.js @@ -81,6 +81,37 @@ const forms = plugin.withOptions(function (options = { strategy: 'base' }) { 'min-height': '1.5em', }, }, + { + // In Safari on macOS date time inputs are 4px taller than normal inputs + // This is because there is extra padding on the datetime-edit and datetime-edit-{part}-field pseudo elements + // See https://github.com/tailwindlabs/tailwindcss-forms/issues/95 + base: [ + '::-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', + ], + class: [ + '.form-input::-webkit-datetime-edit', + '.form-input::-webkit-datetime-edit-year-field', + '.form-input::-webkit-datetime-edit-month-field', + '.form-input::-webkit-datetime-edit-day-field', + '.form-input::-webkit-datetime-edit-hour-field', + '.form-input::-webkit-datetime-edit-minute-field', + '.form-input::-webkit-datetime-edit-second-field', + '.form-input::-webkit-datetime-edit-millisecond-field', + '.form-input::-webkit-datetime-edit-meridiem-field', + ], + styles: { + 'padding-top': 0, + 'padding-bottom': 0, + }, + }, { base: ['select'], class: ['.form-select'],