tailwindcss-react-aria-components breaks :active selector about react-spectrum HOT 4 OPEN

I think it's preferable to use the pressed: variant from the plugin in place of tailwind's default active: variant. You'll get more consistent behavior across input modalities, and this should also fix your issue due to how they're ordered in the plugin. I think the behavior you're seeing is expected, since :active and [data-hovered] have the same specificity, it comes down to which comes last in the stylesheet, which would be [data-hovered] since it comes from the plugin.

from react-spectrum.

I understand the benefits that pressed offers, however, the issue is that the plugin is disrupting the expected behavior, i.e., adding the plugin shouldn’t change existing behavior. In this case, the native hover state is being used because <button> doesn’t have a programmatic isHovered state. It seems like the native :hover selector’s precedence is modified by the plugin, so it only makes sense that the :active selector’s precedence is modified accordingly, even though the selector is discouraged, to maintain consistent behavior.

The specific use case where I want to keep using the :active state is with links because the link components and press removes the native drag and drop ability.

from react-spectrum.

The only potential solution I can think of is specifying a custom variant order in the plugin.

from react-spectrum.

Prefixing all React Aria Components modifiers can resolve this issue.

from react-spectrum.