CSS Animation Not Triggering on Button Hover in Tailwind CSS with Custom Classes
I'm trying to debug I'm experiencing an scenario with CSS animations not triggering properly when hovering over a button that has been styled using Tailwind CSS. I've created a custom button component in my React application, and I added a simple scale animation to it, but it seems that the animation only runs once on the initial hover and then does not reset for subsequent hovers. Here's the button component code: ```jsx const CustomButton = () => { return ( <button className="bg-blue-500 text-white font-bold py-2 px-4 rounded transform hover:scale-105 transition-transform duration-300"> Hover Me </button> ); }; ``` I expected the button to smoothly scale up every time I hover over it, but it only animates on the first hover and doesn't scale back down when the mouse leaves or when I hover again. I verified that the `hover:scale-105` class is applied correctly, and I've also checked the Tailwind configuration to ensure that the `transition` utilities are properly included. I’ve tried removing the `duration-300` class and using inline styles for the transition, but the scenario continues. Additionally, I attempted to use `@apply` to create a custom class for the hover effect and encountered the same behavior. The Tailwind CSS version I am using is 3.0.0. Any insights on why this animation isn’t behaving as expected would be greatly appreciated! I'd really appreciate any guidance on this.