[#69] Tailwind 4 upgrade (#81)

* [#69] Run `npx @tailwindcss/upgrade@next`

* [#69] Add back default border color

TW 4 changed the default border color to `currentColor` instead of gray-200

This change adds back gray-200 where it wasn't specified.

* [#69] Port js config to app.css

* [#69] Migrate to Tailwind's `max-*` media query format.

* [#69] Fix issues with nested dark:text-red-300

* [#69] Resolve type errors with animation keyframes

Author: joshuapease

config/tailwind/container.js

@@ -23,23 +23,23 @@ export default plugin(({ addComponents }) => {
             'dialog-backdrop-out var(--dialog-transition-duration, 300ms) cubic-bezier(0.2, 0, 0.13, 1) forwards',
         },
       },
-      // Animation Keyframes
-      '@keyframes dialog-in': {
-        '0%': { transform: 'translateY(2rem)', opacity: 0 },
-        '100%': { transform: 'translateY(0px)', opacity: 1 },
-      },
-      '@keyframes dialog-out': {
-        '0%': { transform: 'scale(1)', opacity: 1 },
-        '100%': { transform: 'scale(0.9)', opacity: 0 },
-      },
-      '@keyframes dialog-backdrop-in': {
-        '0%': { opacity: 0 },
-        '100%': { opacity: 1 },
-      },
-      '@keyframes dialog-backdrop-out': {
-        '0%': { opacity: 1 },
-        '100%': { opacity: 0 },
-      },
+    },
+    // Animation Keyframes
+    '@keyframes dialog-in': {
+      '0%': { transform: 'translateY(2rem)', opacity: '0' },
+      '100%': { transform: 'translateY(0px)', opacity: '1' },
+    },
+    '@keyframes dialog-out': {
+      '0%': { transform: 'scale(1)', opacity: '1' },
+      '100%': { transform: 'scale(0.9)', opacity: '0' },
+    },
+    '@keyframes dialog-backdrop-in': {
+      '0%': { opacity: '0' },
+      '100%': { opacity: '1' },
+    },
+    '@keyframes dialog-backdrop-out': {
+      '0%': { opacity: '1' },
+      '100%': { opacity: '0' },
     },
   })
 })

config/tailwind/dialog.js

@@ -65,9 +65,14 @@ export default plugin(({ addComponents }) => {
         },
       },
       // required field styles
-      '&[data-required] label .field-label::after': {
-        '@apply content-["*"] text-red-600 align-super text-xs ml-2 font-medium dark:text-red-300':
-          {},
+      '&[data-required] label .field-label': {
+        '&::after': {
+          '@apply content-["*"] text-red-600 align-super text-xs ml-2 font-medium':
+            {},
+        },
+        '.dark &::after': {
+          '@apply text-red-300': {},
+        },
       },
       '&[data-required="long"] label .field-label::after': {
         '@apply content-["*Required"]': {},