Animation Modal: preview fixed

components/AnimationDetailsModal.tsx

@@ -108,7 +108,7 @@ const AnimationDetailsModal: React.FC<Props> = ({
         <div className="flex gap-5">
           <div className="flex-1">
             <div className="rounded-xl bg-zinc-900 text-center px-18 pb-20 pt-24 relative">
-              <Button variant={color} className={animation.animationClass}>
+              <Button variant={color} className={animationClassName}>
                 Click Me
               </Button>
               <p className="text-zinc-600 absolute left-1/2 bottom-3 -translate-x-1/2 text-sm flex items-center gap-1">

tailwind.config.ts

@@ -34,6 +34,8 @@ const animationClasses = [
   "animate-flash",
   "animate-rubber-band",
   "animate-shake",
+  "animate-shake",
+  "animate-shake",
   "animate-swing",
   "animate-scale",
   "animate-rise",
@@ -47,14 +49,24 @@ const animationClasses = [
   "animate-slide-right-and-fade",
 ]
 
+const modifiers = ["hover", "focus", "active"]
+
+const animationClassesWithModifier = animationClasses
+
+animationClasses.forEach((cls) => {
+  modifiers.forEach((m) => {
+    animationClassesWithModifier.push(`${m}:${cls}`)
+  })
+})
+
 const config: Config = {
   content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   safelist: [
-    ...animationClasses,
+    ...animationClassesWithModifier,
     ...usedColors.map((c) => `text-${c}-50`),
     ...usedColors.map((c) => `text-${c}-100`),
     ...usedColors.map((c) => `text-${c}-200`),