feat: tailwindcss-animate (#1734)

package.json

@@ -40,6 +40,7 @@
     "graphql": "^14 || ^15 || ^16",
     "graphql-request": "^6.1.0",
     "tailwind-merge": "^2.3.0",
+    "tailwindcss-animate": "^1.0.7",
     "viem": "^2.21.33",
     "wagmi": "^2.12.24"
   },

playground/nextjs-app-router/onchainkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/onchainkit",
-  "version": "0.35.8",
+  "version": "0.36.0",
   "type": "module",
   "repository": "https://github.com/coinbase/onchainkit.git",
   "license": "MIT",
@@ -40,6 +40,7 @@
     "graphql": "^14 || ^15 || ^16",
     "graphql-request": "^6.1.0",
     "tailwind-merge": "^2.3.0",
+    "tailwindcss-animate": "^1.0.7",
     "viem": "^2.21.33",
     "wagmi": "^2.12.24"
   },

src/styles/tailwind-base.css

@@ -250,5 +250,19 @@
   }
 }
 
+@layer components {
+  .animate-enterRight {
+    @apply animate-in slide-in-from-right-8 fade-in duration-500;
+  }
+
+  .animate-enterUp {
+    @apply animate-in slide-in-from-bottom-8 fade-in duration-500;
+  }
+
+  .animate-enterDown {
+    @apply animate-in slide-in-from-top-8 fade-in duration-500;
+  }
+}
+
 @tailwind utilities;
 @tailwind components;

tailwind.config.js

@@ -11,54 +11,7 @@ export default {
       fontFamily: {
         display: 'DM Sans, sans-serif',
       },
-      keyframes: {
-        fadeInRight: {
-          '0%': {
-            opacity: '0',
-            transform: 'translate(2rem)',
-          },
-          '100%': {
-            opacity: '1',
-            transform: 'translate(0)',
-          },
-        },
-        fadeInUp: {
-          '0%': {
-            opacity: '0',
-            transform: 'translateY(2rem)',
-          },
-          '100%': {
-            opacity: '1',
-            transform: 'translateY(0)',
-          },
-        },
-        fadeInDown: {
-          '0%': {
-            opacity: '0',
-            transform: 'translateY(-2rem)',
-          },
-          '100%': {
-            opacity: '1',
-            transform: 'translateY(0)',
-          },
-        },
-        fadeIn: {
-          '0%': { opacity: '0' },
-          '100%': { opacity: '1' },
-        },
-        fadeOut: {
-          '0%': { opacity: '1' },
-          '100%': { opacity: '0' },
-        },
-      },
-      animation: {
-        enterRight: 'fadeInRight 500ms ease-out',
-        enterUp: 'fadeInUp 500ms ease-out',
-        enterDown: 'fadeInDown 500ms ease-out',
-        fadeIn: 'fadeIn 100ms ease-out',
-        fadeOut: 'fadeOut 100ms ease-in',
-      },
     },
   },
-  plugins: [],
+  plugins: [require('tailwindcss-animate')],
 };

yarn.lock

@@ -2163,6 +2163,7 @@ __metadata:
     storybook: "npm:^8.2.9"
     tailwind-merge: "npm:^2.3.0"
     tailwindcss: "npm:^3.4.3"
+    tailwindcss-animate: "npm:^1.0.7"
     tsup: "npm:^8.3.5"
     typescript: "npm:~5.3.3"
     viem: "npm:^2.21.33"
@@ -14785,6 +14786,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tailwindcss-animate@npm:^1.0.7":
+  version: 1.0.7
+  resolution: "tailwindcss-animate@npm:1.0.7"
+  peerDependencies:
+    tailwindcss: "*"
+  checksum: ec7dbd1631076b97d66a1fbaaa06e0725fccfa63119221e8d87a997b02dcede98ad88bb1ef6665b968f5d260fcefb10592e0299ca70208d365b37761edf5e19a
+  languageName: node
+  linkType: hard
+
 "tailwindcss@npm:^3.4.3":
   version: 3.4.4
   resolution: "tailwindcss@npm:3.4.4"