CSS animations optimization guide on pseudo-elements in Tailwind CSS 3.0
I'm trying to create a simple animation on a pseudo-element using Tailwind CSS 3.0, but it doesn't seem to trigger at all. I've defined a keyframes animation in my CSS file, and I'm applying it to a `::before` pseudo-element, but I'm not seeing any effects in my browser. Here’s what I have: ```css @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .btn::before { content: ''; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); animation: fadeIn 0.5s ease; } ``` In my HTML, I am using this button: ```html <button class="btn relative z-10 px-4 py-2 text-white bg-blue-500 rounded">Click Me</button> ``` I’ve ensured the Tailwind setup is correct and I've applied the necessary utility classes. However, when I hover over the button, I don’t see the pseudo-element animation at all. I’ve tried adding a `z-index` to ensure it’s on top, but that hasn't helped either. The pseudo-element appears, but it just shows instantly without the fade-in effect. Is there something I might be overlooking with Tailwind CSS that’s affecting this animation? Any insight would be greatly appreciated!