[#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
vigetlabs · Feb 25, 2025 · 9785f3c · 9785f3c
1 parent 2e15ca6
commit 9785f3c
Show file tree

Hide file tree

Showing 16 changed files with 624 additions and 935 deletions.
diff --git a/config/tailwind/container.js b/config/tailwind/container.js
diff --git a/config/tailwind/dialog.js b/config/tailwind/dialog.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' },
     },
   })
 })
diff --git a/config/tailwind/forms.js b/config/tailwind/forms.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"]': {},