Fix text alignment on date and time inputs on iOS (#144)

* Fix text alignment on date and time inputs on iOS

* Update index.js

---------

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>

Author: reinink

src/index.js

@@ -95,6 +95,17 @@ 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 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': 'inherit',
+        },
+      },
       {
         // 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