Hover: hover
The hover CSS media feature enables us to apply a hover state on devices that support it correctly. This addresses the "sticky hover" issue where tapping an element with a hover style on mobile will keep the hover style active until tapping another element.
@media (hover: hover) {
/* when hover is supported */
a:hover {
color: white;
background: black;
}
}
Tailwind
Tailwind has recently incorporated this feature, which is available behind a feature flag. For more information, please visit the pull request.
future: {
hoverOnlyWhenSupported: true
}
I have previously addressed this issue by utilizing media queries, which are no longer necessary.
-<a class="md:hover:underline">
+<a class="hover:underline">