Super obscure issue - hover on Tailwind V4 not working in extreme edge case

[Pmacdon15]

What version of Tailwind CSS are you using?

"@tailwindcss/postcss": "^4",
"tailwindcss": "^4",
or the version this site is on: tailwind docs

What build tool (or framework if it abstracts the build tool) are you using?

"@eslint/eslintrc": "^3",
"@tailwindcss/postcss": "^4",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"eslint": "^9",
"eslint-config-next": "15.2.3",
"tailwindcss": "^4",
"typescript": "^5"

What version of Node.js are you using?

v22.8.0

What browser are you using?

Chrome, Edge

What operating system are you using?

Windows
HP Spectre 360

Reproduction URL
https://github.com/Pmacdon15/hover-issue.git
tailwindcss.com/docs/hover-focus-and-other-states#hover-focus-and-active

Describe your issue

So as I said this is a very obscure issue so if you close it I would understand but here is the issue. In Tailwind V4 on my windows laptop after the latest update when my laptop is folded over in tablet mode while using a mouse the on hover effect does not work on buttons. Normally I would chalk this up to a weird Windows configuration especially being that I just did an update but most other buttons on the Internet seem to work fine, even the ones from the old tailwind docs. work fine . This issue happens in both the recreation repo I made for you and on the official docs of the current version https://tailwindcss.com/docs/hover-focus-and-other-states#hover-focus-and-active. I am using an HP Spectre 360 and this happens both on Edge and Chrome only while in tablet mode.

[wongjn]

v4 hover variant includes @media (hover: hover) so if your device/browser combination does not pass this media query check, you would not see hover styles. Related:

• [v4] Hover not working as expected on latest chromium version #16832
• Hover styles don't apply in Chrome 133 #16416
• Hover not working #16150

[RobinMalfait]

Hey!

This does seem similar to the other issues that @wongjn linked. Can you share your browser versions (and try to update them)?

The only thing we really do for hover: is that we generate the following CSS:

.hover\:flex {
  &:hover {
    @media (hover: hover) {
      display: flex;
    }
  }
}

And it's the media query that's probably causing some issues. For your own projects (if a browser update doesn't help) is to use a custom hover variant implementation:

@custom-variant hover (&:hover);

This will now produce the following CSS instead:

.hover\:flex {
  &:hover {
    display: flex;
  }
}

This other issue might be the most relevant for your situation: #16416

[MrBoombastic]

I don't know if this should be a separate issue, but hover animations don't work on my Edge browser, but they work just fine on Chrome. Even the docs are broken (https://tailwindcss.com/docs/hover-focus-and-other-states). Using Edge 134.0.3124.93 and Chrome 134.0.6998.178. @custom-variant hover (&:hover); fixes this problem.

[Pmacdon15]

@RobinMalfait I updated Chrome and tested, the issue still persisted, I'm using Version 134.0.6998.178 (Official Build) (64-bit) on Chrome and Version 134.0.3124.93 (Official build) (64-bit) on Edge.

[Pmacdon15]

Also it's only an issue when I fold my laptop over AKA tablet mode, So I don't know how many ppl it would effect, Because generally one would not use a mouse well in tablet mode.

[Pmacdon15]

Also it only happened after the last windows update I'm currently on 24H2 26100.3624

[MrBoombastic]

After doing absolutely nothing (or turning it off and on again), hover works fine again. The Edge version hasn't changed, Windows 11 24H2 26120.3653, although I don't think that the OS version matters.

[Pmacdon15]

I've tried restarting and I've had my computer powered off multiple times since then and I'm still running into the issue when the laptop is folded over into tablet mode.

[philipp-spiess]

Hey @Pmacdon15. The issue you're running into is a known bug in Chrome when using @media (hover: hover) queries. You can read more about it in [https://github.com//issues/16531](this discussion). Going to mark this as a dupe and merge them together.

@MrBoombastic If you still have issues with animations I'd say please create a new GitHub issue with a reproduction. Thanks!

[Pmacdon15]

Thank you for your time.