mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
5da6968996
This PR adds some additional styles to Preflight to normalize a bunch of inconsistencies in date/time inputs across browsers. The main motivation for this is to remove these insane classes we have to add in Catalyst: ```html <input type="date" class="[&::-webkit-datetime-edit-fields-wrapper]:p-0 [&::-webkit-date-and-time-value]:min-h-[1.5em] [&::-webkit-datetime-edit]:inline-flex [&::-webkit-datetime-edit]:p-0 [&::-webkit-datetime-edit-year-field]:p-0 [&::-webkit-datetime-edit-month-field]:p-0 [&::-webkit-datetime-edit-day-field]:p-0 [&::-webkit-datetime-edit-hour-field]:p-0 [&::-webkit-datetime-edit-minute-field]:p-0 [&::-webkit-datetime-edit-second-field]:p-0 [&::-webkit-datetime-edit-millisecond-field]:p-0 [&::-webkit-datetime-edit-meridiem-field]:p-0"/> ``` With these normalizations, changing things like padding, display type, etc. gives consistent results (at least as consistent as is actually possible) across all browsers. --- **Make text alignment work on iOS Safari** <kbd><img width="418" alt="iOS Safari text alignment" src="https://github.com/user-attachments/assets/0ff792b2-1f3a-40c6-9185-6bd076c8715d"></kbd> --- **Don't shrink date inputs on iOS Safari when there is no selected value** <kbd><img width="409" alt="ioS Safari no input" src="https://github.com/user-attachments/assets/a8e69af7-3f0c-4d1d-b7a0-10355a5d3907"></kbd> --- **Fix padding in macOS Safari** <kbd><img width="717" alt="MacOS Safari" src="https://github.com/user-attachments/assets/5ea19b66-2dec-46e2-a386-d61bd5b8517a"></kbd> --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>