Hover class doesn't work anymore even on the tailwind site.

[Zeketo1]

What version of Tailwind CSS are you using? "tailwindcss": "^4",

For example: v4.0.6

What build tool (or framework if it abstracts the build tool) are you using? Next.js 15.1.7

For example: postcss-cli 11.0.0, Next.js 15.1.7, Vite 6.1.0

What version of Node.js are you using? Node.js v20.16.0

For example: v20.0.0

What browser are you using? Chrome

For example: Chrome, Safari, or N/A

What operating system are you using? Windows

For example: macOS, Windows

Reproduction URL

A Tailwind Play link or public GitHub repo that includes a minimal reproduction of the bug. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private/confidential, since we want a link to a separate, isolated reproduction anyways.

A reproduction is required when filing an issue — any issue opened without a reproduction will be closed and you'll be asked to create a new issue that includes a reproduction. We're a small team and we can't keep up with the volume of issues we receive if we need to reproduce each issue from scratch ourselves.

Describe your issue

Describe the problem you're seeing, any important steps to reproduce and what behavior you expect instead.

[adamwathan]

Hey! Sounds like your computer is not matching @media (hover: hover) — touchscreen laptop I'm guessing that considers the touchscreen to be the primary device.

Out of curiousity, can you screenshot what you see when you visit this demo?

https://play.tailwindcss.com/o1a5O91CLD?layout=preview

[Zeketo1]

Oh you're right my laptop is touchscreen but it used to work before when i used tailwind on my projects..... but after this recent version of tailwind "^4" it kinda stopped working, had to use framer-motion to implement the animation i needed cos i needed to deliver the website.

And for the demo this is what i see

[euglv]

How could this be fixed?
Why hover: is not working when User has a mouse together with the touchscreen?

[Zeketo1]

I honestly don’t know, have been trying to get a fix for days but it ain’t working….. I’m just using framer-motion for hover animation for the time being since that one works.

[Zeketo1]

I honestly don’t know, have been trying to get a fix for days but it ain’t working….. I’m just using framer-motion for hover animation for the time being since that one works.

[wongjn]

You could override the hover variant to remove the @media (hover: hover):

@custom-variant hover (&:hover);

[Zeketo1]

You could override the hover variant to remove the @media (hover: hover):

@custom-variant hover (&:hover);

Thanks bro, it worked ✊❤️