feat(tailwind): add hoverOnlyWhenSupported and new animations

daodaoedu · Dec 21, 2024 · 690f3d2 · 690f3d2
1 parent 7f9c191
commit 690f3d2
Showing 1 changed file with 17 additions and 0 deletions.
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -3,6 +3,9 @@ const typography = require('@tailwindcss/typography');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
   content: [
     "./components/**/*.{jsx,tsx}",
     "./contexts/**/*.{jsx,tsx}",
@@ -103,6 +106,13 @@ module.exports = {
             '100%': { opacity: 1 },
           },
         },
+        [`.animate-fade-out`]: {
+          animation: 'fade-out var(--animation-duration, 200ms) var(--animation-delay, 0ms) forwards ease-in-out',
+          '@keyframes fade-out': {
+            '0%': { opacity: 1 },
+            '100%': { opacity: 0 },
+          },
+        },
       });
       addUtilities({
         [`.animate-slide-y-in`]: {
@@ -112,6 +122,13 @@ module.exports = {
             '100%': { transform: 'translateY(0)' },
           },
         },
+        [`.animate-slide-y-out`]: {
+          animation: 'slide-y-out var(--animation-duration, 200ms) var(--animation-delay, 0ms) forwards ease-in-out',
+          '@keyframes slide-y-out': {
+            '0%': { transform: 'translateY(0)' },
+            '100%': { transform: 'translateY(var(--animation-distance, 100%))' },
+          },
+        },
       });
       addUtilities({
         [`.animate-slide-x-in`]: {