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?

Feb 10

Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.


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;
  • 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!