Modifying hover in Tailwindcss

Question

I've noticed that :hover in Tailwindcss uses the defaults hover selector which causes 'stuck' hover states on mobile. Is there a way to modify the :hover function to do a @media(hover:hover) instead?

Answer 1

By far the simplest way is to add your own @media rule to the @responsive-class of rules in tailwind. How you can do that is described in the official tailwind documentation under the topic of custom media queries.

Simply add this to your config:

// tailwind.config.js
module.exports = {
    theme: {
        extend: {
          screens: {
            'hover-hover': {'raw': '(hover: hover)'},
      }
    }
  }
}

This translates to @media (hover: hover) { ... } in css. And voila, you could use hover-hover:text-red to display red text only for devices that have hover ability.

To make your own, leave 'raw' as is and change the other two attributes to whatever media query you want. The first attribute hover-hover is what you use in tailwind. The second (hover: hover) is what your actual css @media query looks like. E.g.: hover: none or pointer: coarse.

Now, go ahead and use hover-hover:hover:text-red to modify your hover states.