Get your next remote job on LaraJobs.
CSS Tailwind CSS

Disable hover styles on mobile with Tailwind CSS

Benjamin Crozat
Published on Dec 17, 2023 0 comments Edit on GitHub
Disable hover styles on mobile with Tailwind CSS

Introduction to the sticky hover problem on mobile

A common issue encountered is the “sticky hover” problem on mobile devices. This occurs when elements styled with hover effects in CSS retain these styles after being tapped, until the user interacts with another element.

This behavior, which differs from how hover effects traditionally work on desktops with a mouse, can lead to a less intuitive user experience.

How Tailwind CSS fixes this problem

Tailwind CSS addresses this issue by modifying how hover styles are applied. The solution involves using CSS media queries to ensure hover styles are only activated on devices that support hover, like those with a mouse.

This is achieved through a simple yet effective update in the CSS:

The old approach:

.hover\:underline:hover {
  text-decoration-line: underline;
}

The new approach:

@media (hover: hover) and (pointer: fine) {
  .hover\:underline:hover {
    text-decoration-line: underline;
  }
}

This change ensures that hover styles are only active on devices that can accurately detect hover events, effectively solving the sticky hover problem on mobile devices.

How to enable hoverOnlyWhenSupported in Tailwind CSS

To use this new approach in your Tailwind CSS projects, you need to enable the hoverOnlyWhenSupported flag in your Tailwind configuration. This is done in the tailwind.config.js file as follows:

module.exports = {
  future: {
    hoverOnlyWhenSupported: true
  }
}

By setting this flag, you opt into the new behavior, which will become the default in the upcoming Tailwind CSS v4.

It’s important to note that this is a breaking change and may affect existing styles, particularly for mobile devices.

Wait, there's more!

Be the first to comment!

Get help or share something of value with other readers!

Great deals for enterprise developers
  • Summarize and talk to YouTube videos. Bypass ads, sponsors, chit-chat, and get to the point.
    Try Nobinge →
  • Monitor the health of your apps: downtimes, certificates, broken links, and more.
    20% off the first 3 months using the promo code CROZAT.
    Try Oh Dear for free
  • Keep the customers coming; monitor your Google rankings.
    30% off your first month using the promo code WELCOME30
    Try Wincher for free →
The latest community links
- / -