From 2f9a7177b8602694ccab885893b894f775b0784c Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Sat, 19 Aug 2023 08:35:56 -0400
Subject: [PATCH 1/2] Fix text alignment on date and time inputs on iOS

---
 src/index.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/index.js b/src/index.js
index ce7e8ac..512073b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -95,6 +95,16 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) {
           'min-height': '1.5em',
         },
       },
+      {
+        // In Safari on iOS date and time inputs are centered instead of left-aligned.
+        // Changing the text alignment on the input itself doesn't work. The only
+        // way to fix is using the `-webkit-date-and-time-value` pseudo element.
+        base: ['::-webkit-date-and-time-value'],
+        class: ['.form-input::-webkit-date-and-time-value'],
+        styles: {
+          'text-align': 'left',
+        },
+      },
       {
         // 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

From c4c9effc36efe7d40158a7a72e86f63eac5b2058 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 21 Aug 2023 21:01:40 -0400
Subject: [PATCH 2/2] Update index.js

---
 src/index.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/index.js b/src/index.js
index 512073b..5d700f1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -96,13 +96,14 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) {
         },
       },
       {
-        // In Safari on iOS date and time inputs are centered instead of left-aligned.
-        // Changing the text alignment on the input itself doesn't work. The only
-        // way to fix is using the `-webkit-date-and-time-value` pseudo element.
+        // In Safari on iOS date and time inputs are centered instead of left-aligned and can't be
+        // changed with `text-align` utilities on the input by default. Resetting this to `inherit`
+        // makes them left-aligned by default and makes it possible to override the alignment with
+        // utility classes without using an arbitrary variant to target the pseudo-elements.
         base: ['::-webkit-date-and-time-value'],
         class: ['.form-input::-webkit-date-and-time-value'],
         styles: {
-          'text-align': 'left',
+          'text-align': 'inherit',
         },
       },
       {