Tailwind v4.0.14 hover: is not working even on a simple button

[AskatAsh]

Hello guys,
I am currently exploring the new tailwind v4.0.14 with latest tailwind play.

I have created a simple button with hover effect which changes text color on hover or it should have but the hover effect is not properly applied and even the cursor is not changing for button.

When I switch to the previous version v3.4.17 its working just fine. Is it a bug or am I doing something wrong here?

Here is the code link in latest tailwind play:
https://play.tailwindcss.com/cH82HCBOHR

[wongjn]

Some things:

• The hover variant now includes @media (hover: hover), so it could be that your device/browser is incorrectly evaluating the media query to be false.
• V4 removed the <button> element cursor change that was present in v3.

[AskatAsh]

Thanks for the reply. Can you please tell me how to make sure the browser correctly evaluates the media query? I am using chrome on windows.

[wongjn]

See if the hover effect triggers in the example in the MDN docs.

[AskatAsh]

Yes. the hover effect works in MDN docs example.

[Reconfort]

I found solution in the https://tailwindcss.com/docs/upgrade-guide
"In v4 Tailwind team updated the hover variant to only apply when the primary input device supports hover:"

If laptop is touch screen and v4 "thinks" it doesn't have the ability to hover... the solution they propose is to add to the main css file:

"@custom-variant hover (&:hover);"

it can for try it.

[donsimon1]

@abdullah-dev-mamun, Thanks so much for the assistance. It worked for me but I really need clarification on how that solved the problem and why hover classes can not automatically apply?

[wongjn]

The default hover: variant has @media (hover: hover) as well as &:hover. This means if you are on a touch device or a hybrid (but the browser thinks you are on a touch device predominantly), the @media (hover: hover) media query won't pass and thus the CSS declarations won't apply. @custom-variant hover (&:hover) removes the aforementioned media query so hover: applies regardless if you are on a touch device or not.

[mihierkansal]

Thank you so much! This is exactly what I needed!

[Abdullah019]

Great Solved it, but found this after 45 min. I mean my fault kinda.... anyways. I'm curious though as to @media (hover: hover) should make it so when hover is available. right? so that means when I'm using mouse, hover should be available. No? So would that be a CSS browser implementation issue for @media (hover: hover) or does tailwind implements something internally? or am I asking the wrong question?

[wongjn]

It would be a CSS browser implementation issue for @media (hover: hover). For certain combinations, sometimes the browser will not see the primary input as a mouse, even if you have one plugged in.

[peacemaker123456]

@Reconfort solved it for me. Got the issue on my mac book m1 max inside my electron react app

[nabasaisaac]

Adding a custom variant fixed it for me. Try reinstalling Tailwind (latest version v4.1.8) and using Vite if you haven't already.

…

On Mon, Jun 2, 2025, 9:30 PM Casey Shore ***@***.***> wrote: What was the solution? — Reply to this email directly, view it on GitHub <#17225 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BAGFTY42LTT6QEGPQ2K4HHL3BSJ2ZAVCNFSM6AAAAABZCXVMFSVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTGMZUGY4TMNQ> . You are receiving this because you commented.Message ID: ***@***.*** com>

[abdullah-dev-mamun]

@custom-variant hover (&:hover); Please add this line in your app.css file

[AskatAsh]

Thanks for your solution brother. Already fixed this problem.

[segunak]

The fix above @custom-variant hover (&:hover) didn't work for what I was trying to do. My goal was to disable hover on mobile and enable on desktop, not enable hover everywhere. The standard Tailwind v4 behavior using @media (hover: hover) mostly did this, but it didn't catch the edge case where a desktop/laptop reports itself as a touch device because it has a touchscreen, despite also having a mouse and keyboard. I found this to be an issue with laptops such as the Lenovo IdeaPad Flex which I was developing on.

All of the media queries below, run from the console for testing, returned false on the device. Just one of them returning true could've handled the "it's a desktop/laptop, but it has a touch screen" which would then let you go "enable hover".

window.matchMedia('(any-hover: hover)').matches returned false, MDN.

window.matchMedia('(any-pointer: fine)').matches returned false, MDN.

window.matchMedia('(hover: hover)').matches returned false, MDN.

It's a laptop with a touch screen, but still a laptop. I wanted hover to work. I decided to rely on Tailwind breakpoints, as defined here. I went with anything less than 768px is a mobile device, anything greater or equal is a desktop/laptop/something else that gets to have hover.

It isn't perfect, but it covers most cases.

/*
  Override Tailwind v4's default hover variant.
  Tailwind v4 uses @media (hover: hover) which fails on hybrid devices
  (touchscreen laptops) where the browser reports touch as primary input.
  Hover is enabled on desktop (>= 768px) and disabled on mobile (< 768px).
  768px is the tailwind md breakpoint defined at https://tailwindcss.com/docs/responsive-design#overview
*/
@custom-variant hover {
  @media (width >= 768px) {
    &:hover {
      @slot;
    }
  }
}

[bzaugt]

I fixed it by overriding it with any-hover: hover instead of hover: hover, so if any input device supports hover, the hover is applied

@custom-variant hover {
  @media (any-hover: hover) {
    &:hover {
      @slot;
    }
  }
}