Date inputs are 4px taller than other inputs in macOS Safari

[morphsteve]

What version of @tailwindcss/forms are you using?

0.3.3

What version of Node.js are you using?

v14.17.0

What browser are you using?

Safari 14.1.2

What operating system are you using?

macOS 11.5.2

Reproduction repository

https://github.com/tailwindlabs/tailwindcss-forms

Describe your issue

Date inputs on Safari macOS are around 4px taller than other inputs. This is evident on https://tailwindcss-forms.vercel.app/:

This caused by the UA stylesheet applying padding-top: 1px to input::-webkit-datetime-edit and input::-webkit-datetime-edit-year-field (and month-field, day-field etc).

May relate to #38.

I added the following base styles to my app stylesheet to compensate:

@layer base {
    input::-webkit-datetime-edit,
    input::-webkit-datetime-edit-year-field,
    input::-webkit-datetime-edit-month-field,
    input::-webkit-datetime-edit-day-field,
    input::-webkit-datetime-edit-hour-field,
    input::-webkit-datetime-edit-minute-field,
    input::-webkit-datetime-edit-second-field,
    input::-webkit-datetime-edit-millisecond-field,
    input::-webkit-datetime-edit-meridiem-field {
        padding: 0;
    }
}

[reinink]

Hey thanks for reporting this @morphsteve. This is the same issue as #38, so I'm going to close this issue in favor of that one. We have been able to able to reproduce this, and hope to eventually get this fixed 👍