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

[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

[brunobely]

@illiaChaban nice workaround - to use it just comment-me-out:hover:{classname}

[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

[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

[brunobely]

Small screen doesn't necessarily mean mobile/touch browser. The only acceptable solutions should use true @media (hover: hover) queries.

[Tofandel]

If you have hover state in 99% of the cases you want your element to be clickable

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

[Tofandel]

Is there a way to target some tailwind classes when hover is not supported? Something like no-hover:block?

[rChaoz]

@Tofandel See my answer below

[subproject22]

@Tofandel See my answer below

Mind update it for v4?

[rChaoz]

I will update it these days when I have time

[rChaoz]

@subproject22 I have updated my answer for v4

[rChaoz]

Answer updated for v4 - see the v3 version at the bottom of this post.

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

• has-hover: / no-hover: - simply checks for hover support
• the standard hover: is disabled on mobile by default on v4. This rule is applied on hover on desktop, and never on mobile.
• hover-always: - applies the rule on hover on PC, and always on mobile, this rule can also be used with group- / peer-. For example, can be used for buttons that show on hover.
• mobile-hover - replicates the old v3 behaviour, applying the rule on hover on both desktop and mobile (on touch), this can be used for example for button hover animations. Can be used with group- / peer-. Do not use this when the rule applying is crucial, e.g. displaying an element, as it's not guaranteed to trigger on mobile.

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

To use, simply add this to your css file:

@custom-variant has-hover (@media (hover: hover));
@custom-variant no-hover (@media not all and (hover: hover));
@custom-variant hover-always {
  @media (hover: hover) {
    &:hover {
      @slot;
    }
  }
  @media not all and (hover: hover) {
    & {
      @slot;
    }
  }
}
@custom-variant mobile-hover (&:hover);

[ Playground | Cross-test on mobile from desktop ]

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>

Answer for v3

In v3, the standard hover: does not check for hover support using media queries, so hover states can be activated on mobile as most browsers also emulate hover on touch. You can use hover: where this behaviour is acceptable, for example in button hover animations. Do note that in mobile browsers the hover state may not apply on touch, so this should not be used where it's critical, e.g. to show elements.

The config below (which should be added to tailwind.config.ts), adds a few 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), this is the same as the updated default hover: on v4
• hover-always: - applies the rule on hover on PC, always on mobile (also provides group-hover-always and peer-hover-always)

import type { Config } from "tailwindcss"
import plugin from "tailwindcss/plugin"

export default {
    // ...
    plugins: [
        plugin(({ addVariant, addUtilities, matchVariant }) => {
            // Hover media queries
            addVariant("has-hover", "@media (hover: hover) and (pointer: fine)")
            addVariant("no-hover", "@media not all and (hover: hover) and (pointer: fine)")

            // Applied on hover if supported, never applied otherwise
            addVariant("hover-never", "@media (hover: hover) and (pointer: fine) { &:hover }")
            matchVariant(
                "group-hover-never",
                (_, { modifier }) => `@media (hover: hover) and (pointer: fine) { :merge(.group${modifier ? "\\/" + modifier : ""}):hover & }`,
                { values: { DEFAULT: "" } },
            )
            matchVariant(
                "peer-hover-never",
                (_, { modifier }) => `@media (hover: hover) and (pointer: fine) { :merge(.peer${modifier ? "\\/" + modifier : ""}):hover & }`,
                { values: { DEFAULT: "" } },
            )

            // Applied on hover if supported, always applied otherwise
            addVariant("hover-always", [
                "@media (hover: hover) and (pointer: fine) { &:hover }",
                "@media not all and (hover: hover) and (pointer: fine)",
            ])
            matchVariant(
                "group-hover-always",
                (_, { modifier }) => [
                    `@media (hover: hover) and (pointer: fine) { :merge(.group${modifier ? "\\/" + modifier : ""}):hover & }`,
                    "@media not all and (hover: hover) and (pointer: fine)",
                ],
                { values: { DEFAULT: "" } },
            )
            matchVariant(
                "peer-hover-always",
                (_, { modifier }) => [
                    `@media (hover: hover) and (pointer: fine) { :merge(.peer${modifier ? "\\/" + modifier : ""}):hover & }`,
                    "@media not all and (hover: hover) and (pointer: fine)",
                ],
                { values: { DEFAULT: "" } },
            )
        }),
    ],
    // ...
} satisfies Config

[martiuh]

Thank you very much!

[delilahw]

For anyone wanting a quick solution on Tailwind v4, you can use this (e.g. at the top of your global.css):

@import "tailwindcss";

/* Replace `hover-never` with `hover` to override the normal `hover` variant,
   which doesn't include the `pointer: fine` constraint in v4. */
@custom-variant hover-never {
  @media (hover: hover) and (pointer: fine) {
    &:hover {
      @slot;
    }
  }
}

Usage:

Depending on whether you replaced the original hover variant:
<a class="hover-never:underline"/>
<a class="hover:underline"/>

[Tofandel]

It is funny that in v4 they disabled hover styles on mobile, but didn't add at least one of those variants by default, which are pretty much necessary to be able to work with hover displaying stuff on desktop but always visible on mobile

[TalkativeGuy]

Thank you so much for the code!
Unfortunately, after adding it to my config, an error occured and the app doesn't run:

Error

``` Uncaught TypeError: os.platform is not a function at node_modules/fast-glob/out/utils/path.js (tailwindcss.js?v=3be06300:21719:34) at __require2 (chunk-PLDDJCW6.js?v=3be06300:17:50) at node_modules/fast-glob/out/utils/index.js (tailwindcss.js?v=3be06300:24858:16) at __require2 (chunk-PLDDJCW6.js?v=3be06300:17:50) at node_modules/fast-glob/out/managers/tasks.js (tailwindcss.js?v=3be06300:24873:17) at __require2 (chunk-PLDDJCW6.js?v=3be06300:17:50) at node_modules/fast-glob/out/index.js (tailwindcss.js?v=3be06300:27145:23) at __require2 (chunk-PLDDJCW6.js?v=3be06300:17:50) at node_modules/tailwindcss/lib/lib/content.js (tailwindcss.js?v=3be06300:27387:46) at __require2 (chunk-PLDDJCW6.js?v=3be06300:17:50) node_modules/fast-glob/out/utils/path.js @ tailwindcss.js?v=3be06300:21719 __require2 @ chunk-PLDDJCW6.js?v=3be06300:17 node_modules/fast-glob/out/utils/index.js @ tailwindcss.js?v=3be06300:24858 __require2 @ chunk-PLDDJCW6.js?v=3be06300:17 node_modules/fast-glob/out/managers/tasks.js @ tailwindcss.js?v=3be06300:24873 __require2 @ chunk-PLDDJCW6.js?v=3be06300:17 node_modules/fast-glob/out/index.js @ tailwindcss.js?v=3be06300:27145 __require2 @ chunk-PLDDJCW6.js?v=3be06300:17 node_modules/tailwindcss/lib/lib/content.js @ tailwindcss.js?v=3be06300:27387 __require2 @ chunk-PLDDJCW6.js?v=3be06300:17 node_modules/tailwindcss/lib/lib/setupTrackingContext.js @ tailwindcss.js?v=3be06300:79703 __require2 @ chunk-PLDDJCW6.js?v=3be06300:17 node_modules/tailwindcss/lib/plugin.js @ tailwindcss.js?v=3be06300:82153 __require2 @ chunk-PLDDJCW6.js?v=3be06300:17 node_modules/tailwindcss/lib/index.js @ tailwindcss.js?v=3be06300:82199 __require2 @ chunk-PLDDJCW6.js?v=3be06300:17 (anonymous) @ tailwindcss.js?v=3be06300:82202 ```

I'm using Tailwind ^3.4.17 and @nuxtjs/tailwindcss ^6.14.0 Does anyone have any idea what it could mean? I couldn't find any relevant info on the internet

Nevermind I imported import plugin from "tailwindcss" instead of import plugin from "tailwindcss/plugin" because IntelliSence told me that I could
Let's leave it here so nobody repeats my mistake :D