Fix date time bottom spacing on MacOS Safari

In Safari on macOS date time inputs that are set to display: block have unexpected extra bottom spacing.

This can be corrected by setting the ::-webkit-datetime-edit pseudo-element to display: inline-flex, instead of the browser default of display: inline-block.

I've tested this fix using date, datetime-local and time inputs on the following versions of MacOS Safari. (MacOS Safari currently does not support month or week.)

14.1 (Big Sur)
15.6 (Monterey)
16.5 (Ventura)
17 (Sonoma Beta)

I've also had a look at iOS Safari, but date time inputs render completely different there, so this doesn't have any effect at all in that browser.

Note This issue was previously not noticeable in our playgrounds since they were running in quirks mode due to the lack of doctype in those demos. I've corrected that, and now this issue is visible in the playground (again, only on MacOS Safari): https://tailwindcss-forms.vercel.app

tailwindlabs / tailwindcss-forms

Fix date time bottom spacing on MacOS Safari #146