diff --git a/components/AnimationDetailsModal.tsx b/components/AnimationDetailsModal.tsx
index 17c65bb..8953f32 100644
--- a/components/AnimationDetailsModal.tsx
+++ b/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">
diff --git a/tailwind.config.ts b/tailwind.config.ts
index a3d3a66..817755e 100644
--- a/tailwind.config.ts
+++ b/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,6 +49,16 @@ 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}",
@@ -54,7 +66,7 @@ const config: Config = {
     "./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`),