Provide a general summary of the issue here

When the extension tailwindcss-react-aria-components is installed, having both :hover and :active selectors styling the same property doesn't work as expected.

🤔 Expected Behavior?

:active styles should override base and :hover styles.

😯 Current Behavior

If both :hover and :active have different values for background-color, the element will have the :hover background color when the state is actually :active.

💁 Possible Solution

No response

🔦 Context

The tailwindcss-react-aria-components plugin helps to simplify the development process with autocompletion and shorter Tailwind selectors, but breaks existing code that uses the :active selector with :hover.

🖥️ Steps to Reproduce

I couldn't figure out how to use tailwind-react-aria-components in CodeSandBox for free, but here's simple steps and code to reproduce:

1. npx create-next-app@latest with default options
2. npm i react-aria-components tailwindcss-react-aria-components
3. Add tailwindcss-react-aria-components to tailwind.config.ts plugins
4. Replace src/app/page.tsx with following code (I know <Button> exists, this is just an example):

   export default function Home() {
     return (
       <main className="m-4 flex justify-center">
         <button
           type="button"
           className="bg-blue-500 text-white/95 text-xl leading-6 py-2 px-4 hover:bg-blue-600 active:bg-blue-700"
         >
           Press me
         </button>
       </main>
     );
   }

5. Notice that the background color does not change on press
6. Comment out/remove tailwindcss-react-aria-components plugin
7. The background color will now change on press

Version

[email protected] & [email protected] & [email protected]

What browsers are you seeing the problem on?

Chrome, Safari

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response