Fix date time bottom spacing on MacOS Safari (#146)

* Fix date time bottom spacing on Safari

* Update changelog

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Fix date time bottom spacing on MacOS Safari ([#146](https://github.com/tailwindlabs/tailwindcss-forms/pull/146))
 
 ## [0.5.5] - 2023-08-22
 

src/index.js

@@ -106,6 +106,17 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) {
           'text-align': 'inherit',
         },
       },
+      {
+        // 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`.
+        base: ['::-webkit-datetime-edit'],
+        class: ['.form-input::-webkit-datetime-edit'],
+        styles: {
+          display: 'inline-flex',
+        },
+      },
       {
         // 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