Align empty date/time inputs in Safari iOS

[MartijnCuppens]

Safari adds display: inline-flex to date/time inputs, and this causes some alignment issues to empty dates:

Issue demo: https://play.tailwindcss.com/5LRvozLfrJ

By setting the display to display: inline-block (like the other browsers), and changing the vertical alignment of a pseudo element, the alignment is fixed again:

Fix demo: https://play.tailwindcss.com/5juwgUQI6s

[philipp-spiess]

Hey! Sorry for the super-late response here but we did look into this change in detail when we were working on consistent base styles for buttons and form controls that we ultimately decided to roll back because of how big the rabbit hole is that we uncovered.

Your specific changes looks good in the repro you said but once you start working with them (e.g. by adding a width since the empty input boxes do not have a width on iOS) you'll quickly uncover other issues like suddenly the height of the input changes: https://play.tailwindcss.com/K5xdRhnItD

Ultimately we have decided that Tailwind CSS is not something like Bootstrap and that users of Tailwind are expected to style their inputs, so we thought it's better to not be too prescriptive with the defaults here especially if it's only playing Whac-a-Mole. That's why we haven't merged in this PR for the v4 release.

Thank you for the PR though, really appreciate it! But