Get your next remote job on LaraJobs.

Disable hover styles on mobile with Tailwind CSS

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.

Be the first to comment!

Get help or share something of value with other readers!

Great deals for enterprise developers
The latest community links

Recommended articles

Tailwind CSS: the ultimate guide to get started

This is the most comprehensive tutorial about Tailwind CSS. Learn how to make front-end development great again.

Add Tailwind CSS to any Laravel project

See how easy it is to add Tailwind CSS to any Laravel project and start building an amazing user interface.

6 Tailwind CSS best practices, tips, and tricks for 2024

Tailwind CSS is a beloved CSS framework that has been my go-to since 2018. Let me share my knowledge and insights coming from years of experience.

A summary of web related sessions from WWDC23

Using a well-known Large Language Model, I managed to summarize every session from WWDC23 that's related to web development.

Tailwind CSS forms plugin: a step-by-step build guide

Discover how the Tailwind CSS forms plugin can reset your forms to a consistent state across all browsers and make styling easier.

20+ Laravel best practices, tips and tricks to use in 2024

Learning a framework can be overwhelming, but time and execution will make you a master. Here are some best practices to help you toward your goal.

Create a SPA in seconds using wire:navigate in Livewire v3

Discover how to boost the speed of your Laravel apps, mimicking an SPA, without building an API, using Livewire v3 and the new wire:navigate attribute.

3 crucial Laravel architecture best practices for 2024

Explore Laravel's default architecture to simplify collaboration, compatibility, and onboarding.

Laravel interview questions and answers for 2024

Nailing a Laravel job interview can be a daunting task, but with the right preparation and mindset, you can set yourself up for success.

- / -