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 :) 👍

[peacemaker123456]

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