CSS transitions not triggering on focus state with Tailwind CSS
I'm working on a project and hit a roadblock... I'm trying to implement a smooth transition effect on a button that changes its background color when it's focused, but the transition isn't triggering correctly. I'm using Tailwind CSS version 2.2.19, and I want the background to change when the button receives focus. Here's the code I have so far: ```html <button class="bg-blue-500 text-white px-4 py-2 transition-colors duration-300 focus:bg-blue-700 focus:outline-none"> Click me </button> ``` When I focus on the button, the color changes immediately without the transition effect. I've also tried adding the `transition` class directly to the button and specifying `transition-colors`, but it still doesn't seem to work. I verified that other classes like `hover` work just fine, so I'm unsure why `focus` is failing to trigger the transition. Additionally, I've confirmed that my Tailwind configuration is correct, and I'm not overriding any default styles. Is there a specific reason why the transition for the focus state might not be working, or is there a different approach I should consider? Any suggestions would be greatly appreciated! Any ideas what could be causing this?