Configure Touch Screen Media Queries Using Tailwind CSS

Using Tailwind CSS For Touch Screen Media Queries

At the time of this writing I’m using Tailwind version 3.1.8. The issue I’m looking to deal with is detecting whether or not the device I’m targeting allows for ‘touch’ interactions. Specifically, I have a ‘group-hover’ class that returns the hover state on mobile… I don’t want that.

Here’s the code where the ‘group-hover’ class works on mobile devices. When the user touches the screen's interactive div element, the text will change from blue to red.

        
            <div id="card" class="group">
                <p class="text-blue-400 group-hover:text-red-400">
                  Here is placeholder text.
                </>
            </div>              
        
    

To resolve this issue I’ve configured my Tailwind.config.js with the following code:

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

Tailwind has addressed the mobile hover issue and will officially release it in version 4.0. However, if you can’t wait until then simply add the bit of code above to your Tailwind config file and your hover states will only work on devices that support it.