Disable Tailwind CSS Hover States on Tap Devices

Did you know you can quickly and easily disable Tailwind's hover state classes on tap devices, like phones and tablets?

Published
Feb 10, 24

Developer & dog lover. I teach AdonisJS, a full-featured Node.js framework, at Adocasts where I publish weekly lessons. Professionally, I work with JavaScript, .NET, and SQL Server.

Adocasts

Burlington, KY

Have you ever been browsing a site on your phone only to have your click activate an element's hover state? It's annoying, right?

Did you know if you're using Tailwind CSS you can disable the hover: classes on tap devices, like phones and tablets, using one quick and easy config option?

export default {
  content: ['./resources/**/*.{edge,js,ts,jsx,tsx,vue}'],
  future: {
    hoverOnlyWhenSupported: true, // 👈 enable hover only when supported
  },
  // ...
}

This, in turn, will wrap all our hover: and group-hover: usages within a CSS at-rule for hover and pointer, like the below.

@media (hover: hover) and (pointer: fine) {
  .group:hover .group-hover\:opacity-75 {
    opacity: .75;
  }
}
Copied!
  • hover: hover will ensure we're using a device that supports hovering

  • pointer: fine will ensure we're using an accurate pointer device, like a mouse

Join The Discussion! (0 Comments)

Please sign in or sign up for free to join in on the dicussion.

robot comment bubble

Be the first to Comment!