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
  },
  // ...
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

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