How do I disable hover styles on mobile?

[rightaway]

If I create a custom media query that uses https://caniuse.com/#feat=css-media-interaction to target devices that are not mobile, I can do something like notmobile:hover:font-bold to make sure the bold style only takes effect not on mobile devices.

The problem is that I'd have to remember to always use notmobile:hover: everywhere I'm using hover:, which clutters the html and could lead to forgetting to use it in certain places.

A feature where we could set :hover to only apply for a certain media query that applies globally would be useful. Often the hover styles cause issues on mobile browsers where they're better off not being there.

Alternatively is there a way to write a media query that automatically appends another style to each style? So that when I create the notmobile media query I can tell it to generate all its styles appending :hover to it. Then I only need to use notmobile:font-bold instead of notmobile:hover:font-bold. This feature could be a better way of doing it than what I suggested before because this is more generic and could allow for interesting possibilities.

[estevanmaito]

Could you expand on this? Because :hover is not even triggered on mobile.

Often the hover styles cause issues on mobile browsers where they're better off not being there.

It could be the case when you have content that is hidden/revealed on hover, but then thats also a problem for eveybody that's not using a mouse.

Alternatively is there a way to write a media query that automatically appends another style to each style?

It can be done with plugins

[rightaway]

:hover is triggered on mobile.

[stefanfisk]

The behavior of :hover is browsers dependent on mobile. Safari for example sets hover on touch, and only removes it once another element is touched.

[rightaway]

Exactly and this inconsistency is another reason to want to disable them.

[VaibhavAcharya]

Best way is to use media query to detect if a device supports hover and only disable it if it does not.

This can be done by adding this to your tailwind.config.js file :

module.exports = {
    theme: {
        extend: {
            screens: {
                'betterhover': {'raw': '(hover: hover)'},
            }
        }
    }
}

Now you can use it like this : betterhover:font-bold

[timmeade]

OK i misunderstood use:

you have to: betterhover:hover:bg-green-100

Now it works fine :-)

[hyvyys]

Doesn't work for me in Tailwind 5.0.0-2

[rohit-k-singh]

This answer will override the tailwinds min-* and max-* stylings for dynamic responsive screens.

[illiaChaban]

@Rksingh620 is right, it overrides arbitrary media queries for me to. For example min-[320px]:text-center stops working. Why is that? Is that a bug

[illiaChaban]

found the answer. Here's the issue and here's the answer (it's not supported). There's a workaround tho if you use "addVariant" like here

[royvanv]

The downside to @VaibhavAcharya's solution is that it is currently not possible to make it responsive.

[imjohnlouie04]

I think it can be done using JIT like for example md:hover:font-bold

[JuanmaMenendez]

The Tailwind classes:

pointer-events-none
pointer-events-auto

Are everything you need

[stefanfisk]

could you provide an example on how to use them to solve this use case?

[ajmnz]

could you provide an example on how to use them to solve this use case?

<div className="pointer-events-none md:pointer-events-auto"></div>

[stefanfisk]

wouldn't that also disable click?

[ajmnz]

wouldn't that also disable click?

Yes, only use this if that element isn't meant to be clicked. Otherwise, I'd use VaibhavAcharya's solution

[vdzk]

@VaibhavAcharya's solution still required me to write out betterhover:hover:font-bold which is what @rightaway wanted to avoid in the first place.
Tailwindcss-touch allows me to write hover-hover:font-bold.

[vdzk]

Never mind. Tailwindcss-touch has its own issues. betterhover:hover:font-bold it is :(

[vdzk]

Now, I found out that this approach only works for me during Chrome's remote debugging. When I unplug the USB cable from my phone, the sticky hover state is back!

[vdzk]

Just checked with media query tester. When in remote debugging mode hover: none. When in normal mode hover: hover. Yep, not only mobile browser lies to me, the remote debugger covers up that lie. Wonderful. On the plus side, tailwind works as expected.

[kalnode]

@vdzk So.... betterhover:font-bold is still the best thing? Or is it betterhover:hover:font-bold as per your earlier comment?

[jcobert]

With this, I'm finding that if I want to style the active state, I now have to write redundantly something like active:font-bold betterhover:active:font-bold otherwise active styling only applies to touch-enabled devices. Any way around this?

[ounissi-zakaria]

If you are using Tailwind with postcss maybe this plugin can help postcss-hover-media.

[SilencerWeb]

NOTE: Be careful with this plugin since as I understand it disables hover on touch devices everywhere with no ability to turn it on somewhere you need. E.g. you have a dropdown menu that is opening hover, it won't open on touch devices ¯\_(ツ)_/¯

[egegungordu]

For anyone bumping into this thread using v3, there's now a tailwind flag you can use to disable hover on mobile devices without downloading anything. from this pull request

Just add:

// tailwind.config.js
module.exports = {
  future: {
    hoverOnlyWhenSupported: true,
  },
  // ...
}

[CavalcanteLeo]

⚠️ ⚠️ ⚠️ DO NOT USE IT ⚠️ ⚠️ ⚠️

IT CAN LEAD TO VARIOUS BUGS, DO NOT DISABLE HOVER ON MOBILE

[tresorama]

⚠️ ⚠️ ⚠️ DO NOT USE IT ⚠️ ⚠️ ⚠️

IT CAN LEAD TO VARIOUS BUGS, DO NOT DISABLE HOVER ON MOBILE

Are you referring to disabling it in general or only with this approach taken by tailwind ?

[adamwathan]

The only way this can lead to bugs on mobile is if you build your site to depend on hover styles for important interactions, like opening popups on hover instead of click. Don't do that. You can't hover on mobile, so don't rely on hover existing for your site to work.

[kylemorena]

Sorry @adamwathan, Can I find it in Tailwind docs?

[roydigerhund]

@adamwathan do you think it would make sense to have an option to automatically replace hover state with active state on touch devices? This way the user would still see the effect while pressing the element but it does not stay in the hover/active state when the press is released.

[rChaoz]

Here's my current solution which covers all use-cases, which adds three custom variants:

• has-hover: / no-hover: - simply checks for hover support
• hover-never: - applies the rule on hover on PC, never on mobile (also provides group-hover-never and peer-hover-never)
• hover-always: - applies the rule on hover on PC, always on mobile (also provides group-hover-always and peer-hover-always)
• the standard hover: is kept as-is, which I still like to use for buttons/similar, when I don't mind that they stay in hover state until the user clicks something else, or if the hover state is never applied

Note: By PC I mean device supporting hover and by mobile I mean device not supporting hover, for simplicity.

To make it work, just add the following to your tailwind.config.ts:

import plugin from "tailwindcss/plugin"

export default {
    // ...
    plugins: [
        // ...
        plugin(({ addVariant }) => {
            // Hover media queries
            addVariant("has-hover", "@media (hover: hover)")
            addVariant("no-hover", "@media (hover: none)")
            // Applied on hover if supported, never applied otherwise
            addVariant("hover-never", "@media (hover: hover) { &:hover }")
            addVariant("group-hover-never", "@media (hover: hover) { :merge(.group):hover & }")
            addVariant("peer-hover-never", "@media (hover: hover) { :merge(.peer):hover & }")
            // Applied on hover if supported, always applied otherwise
            addVariant("hover-always", ["@media (hover: hover) { &:hover }", "@media (hover: none)"])
            addVariant("group-hover-always", ["@media (hover: hover) { :merge(.group):hover & }", "@media (hover: none)"])
            addVariant("peer-hover-always", ["@media (hover: hover) { :merge(.peer):hover & }", "@media (hover: none)"])
        }),
    ]
}

Sample usage:

<!-- Button is always visible on mobile, otherwise shown when the parent card is hovered -->
<div class="card group">
  ...
  <button class="opacity-0 group-hover-always:opacity-100">...</button>
</div>