From c1c4286d918aa20f439ab4f58ea8d70037052a06 Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Mon, 28 Aug 2023 16:37:14 -0400
Subject: [PATCH] Fix date time bottom spacing on MacOS Safari (#146)

* Fix date time bottom spacing on Safari

* Update changelog
---
 CHANGELOG.md |  4 +++-
 src/index.js | 11 +++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a18af88..b3b851c 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/src/index.js b/src/index.js
index 9b37b08..04a3992 100644
--- a/src/index.js
+++ b/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