Description
Dealing with hover on mobile / touch devices seems to be a topic of discussion.
Problem
I'm using a button, variant "outline". After clicking the button on a mobile device, the button looks like a regular (non-outline) button. Mobile users need to tap outside the button for the button to go back to its "outline" style after clicking it.
Desired / expected behavior
After clicking an "outline" button, I'd like the button to go back to its original "outline" style.
Questions
- Is there a way to disable the hover styles on a button completely (while keeping the button clickable).
- Is there some kind of workaround to get an "outline" button to behave as desired.
I wouldn't mind if the style doesn't change on hover on desktop if it solves the problem on mobile.
Context
I tried some of the suggestions in this issue (tailwindlabs/tailwindcss#1739), but it seems that it would only work in places where I manually add classes via classNames. However, the tailwind classes for the button's default behavior are out of my control and reach as far as I can tell.