Solution: Animation not working when using tailwindcss-animate

[Zain-ul-din]

I was grabbing the home page animation in my project. i find out it animation is not working after 1 hour of struggle I found a problem the classes being used for animation conflicted with the tailwindcss-animate package. Here I solve this issue feel free to share best solution.

1. add your custom namespace in front of the animation name & keyframes.

 animation: {
      "custom-fade-in": "custom-fade-in 3s ease-in-out forwards",
      ...
 }
 ...

2. add important where you'll use these classes.

<div className="!animate-custom-fade-in">...</div>