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.

[AskatAsh]

Hey Reconfort Daniel,
Sorry for late reply and my heartfelt thanks to you for solving this issue for me and also the other who were facing the same issue. I appreciate this greatly :) 👍

[nabasaisaac]

thank you so much team, i have been struggling with the same problem for 3 month now!

[BowArrow]

Still doesn't work for me even when I add custom variant. I'm on a full desktop with no touch screen or touch device connected too. Definitely a real issue and not just a user problem.

[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>