Hover styles don't apply in Chrome 133

[benweier-riotinto]

What version of Tailwind CSS are you using?

4.0.4 / 4.0.5 / 4.0.6

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

Vite with plugin

What version of Node.js are you using?

22.13.1

What browser are you using?

Chrome 132 / 133
Edge 132 / 133
Brave 132 / 133
Firefox 134 / 135

What operating system are you using?

Windows 11. Note that I'm on a touch-enabled device but am not using (and have/will never use) the tablet/touch mode.

Reproduction URL

https://play.tailwindcss.com/ejMhEzAx6k
https://codesandbox.io/p/devbox/59ynks

Describe your issue

Using hover: with any Chromium 133 based browser does not apply hover styles whereas it does work in Chromium 132 based browsers.

The CSS of my project (with custom colour variables) looks like this in devtools

Chrome 133:

Edge 132:

Firefox 135:

[wongjn]

Could be related to #16150 (comment)

[philipp-spiess]

@benweier-riotinto Hey! I am able to run your repro on Chrome 133 and :hover modifier work fine. I also recommend you take a look at #16150 (comment) and see if this applies to your setup.

[wunderlichh]

I have exactly the same problem on Chome 133 with my Dell laptops (Precision 3580 and Latitude 5450) and both have no touch functionality at all.

[sheepa]

I too have the exact same issue, in chrome (133.0.6943.60) only, firefox works fine, and tablet mode is disabled. Running windows 10.

[philipp-spiess]

All we do from the Tailwind CSS side is to prefix all :hover calls with a hover media query. 🤔 So for some reasons your Chrome browsers think that the device does not support hover even though it does. Perhaps this could be related to a DevTools setting or a browser extension? The MDN page I linked contains a test too, does these work for y'all?

One thing you can do to work around this is to overwrite the hover variant to _not test for the hover media query. You can do this via:

@custom-variant hover (&:hover);

However, you really should not have to. The hover media query is fully supported by Chrome since version 41. 🤔

[sheepa]

All we do from the Tailwind CSS side is to prefix all :hover calls with a hover media query. 🤔 So for some reasons your Chrome browsers think that the device does not support hover even though it does. Perhaps this could be related to a DevTools setting or a browser extension? The MDN page I linked contains a test too, does these work for y'all?

One thing you can do to work around this is to overwrite the hover variant to _not test for the hover media query. You can do this via:

@custom-variant hover (&:hover);
However, you really should not have to. The hover media query is fully supported by Chrome since version 41. 🤔

The MDN page test works, as does non-tailwind websites. I've tried disabling all extensions and running in incognito mode. Havn't really fiddled with any dev tools settings, the same bug whether or not dev tools is open or not.

[philipp-spiess]

The MDN page test works

Does it show a black background or a yellow background when hovering? There's nothing that Tailwind CSS does differently from that MDN example with the hover media query.

[sheepa]

The MDN page test works

Does it show a black background or a yellow background when hovering? There's nothing that Tailwind CSS does differently from that MDN example with the hover media query.

Ah, indeed it shows the yellow one.

[Angel-Guxman]

apparently if the browser is based on chromium it doesn't work, I already tried it with the brave browser the only one that worked is firefox.

[duprayae179dpl]

I ran into this exact issue that @benweier-riotinto originally posted. None of the hover events were compiling in the Chrome dev tools for me as well. Also note that Tailwind 3.x was working perfectly fine. It happens in all of the latest browsers for me: Chrome 133.0.6943.60, Firefox 135.0 and Edge 133.0.3065.59. I have Dell XPS 9310 2-in-1 with touchscreen.

The issue at hand is the touchscreen functionality on my laptop. I tried disabling it on the OS-level: disabling the HID touchscreen device in the device manager, disabling touch input via the Control Panel, but nothing worked. I went into the BIOS and disabled the touchscreen there and everything worked 100% fine for me in all browser after that. If I turn back on the touchscreen in the BIOS, none of the hover events work any more.

If you have a touchscreen laptop, it must be disabled at the BIOS-level, not the OS-level. Something in Tailwind 4.x keeps instructing web browsers not to enable any sort of hover events. Again, TW 3.x hover events works perfectly fine. So this seems to be something related to TW 4.x. Just not sure where or what causes this.

Hopefully this helps anyone that has this issue.

[philipp-spiess]

@duprayae179dpl @Angel-Guxman @sheepa @wunderlichh @benweier-riotinto can I ask you to please try hovering over the elements in this playground and report back which of these do work and which don't for you? That would be fantastic:

https://play.tailwindcss.com/36UPgr54ER?file=css

[LeuzziLuigi]

@philipp-spiess only the first one works

[davidfishlock]

Just FYI everyone there is a regression tracked on Chromium here.

https://issues.chromium.org/issues/394519480

Causing issues with hover: hover and pointer: fine media queries on devices like laptops with a touchscreen but also a mouse connected.

If you are using hoverOnlyWhenSupported in your tailwind config to avoid sticky touch states then this will impact you as it relies on those media queries specifically.

Would recommend considering removing hoverOnlyWhenSupported from your config for now until this is resolved in a future Chrome update, although given it has been set at P0 then shouldn't hopefully be too long.

[duprayae179dpl]

@duprayae179dpl @Angel-Guxman @sheepa @wunderlichh @benweier-riotinto can I ask you to please try hovering over the elements in this playground and report back which of these do work and which don't for you? That would be fantastic:

https://play.tailwindcss.com/36UPgr54ER?file=css

All hovering works for me if I disable the touchscreen at the BIOS level.

[duprayae179dpl]

@davidfishlock Is there any documentation for disabling/removing hoverOnlyWhenSupported for Tailwind 4.x? SInce there's no tailwind config file like version 3.x, not sure where to do this.

[duprayae179dpl]

Per the TW 4.x docs, looks like this needs to be added using the @supports layer. I'm looking into this now.

[davidfishlock]

@duprayae179dpl oh only just realised that Tailwind 4 bakes in the hover: hover query into the modifier without having to opt in through config. Sorry we are still on 3.x here.

As per @philipp-spiess comment here
#16416 (comment)

@custom-variant hover (&:hover);

Should do the trick for Tailwind 4 users until Chromium fix this.

[duprayae179dpl]

@davidfishlock @philipp-spiess I can confirm that the custom variant code above works on my end and does not populate the @media (hover: hover) code in the CSS file (see below) that detects if the device can hover or not. Thanks a bunch for this!

@media (hover: hover) {
    .hover\:text-red-500:hover {
        color: var(--color-red-500)
    }
}

[wunderlichh]

@philipp-spiess hey, only the first one works.

[benweier-riotinto]

@duprayae179dpl @Angel-Guxman @sheepa @wunderlichh @benweier-riotinto can I ask you to please try hovering over the elements in this playground and report back which of these do work and which don't for you? That would be fantastic:

https://play.tailwindcss.com/36UPgr54ER?file=css

Only the first example works for me.

The MDN example also only shows a yellow background instead of black.

Using the hover custom variant override worked a treat, and according to the issue tracker it looks like the Chrome regression has been addressed in 133.0.6943.94 (as yet unpublished)

[aleksey-hoffman]

I'm using a regular laptop without any touch support.
After upgrading to Tailwind v4, hover no longer works on Chrome. It does work properly on Edge, though.

The problem goes away after adding this override to my css:

@custom-variant hover (&:hover);

Windwos 11
Chrome: version 133.0.6943.60 (Official Build) (64-bit)

[philipp-spiess]

Hey folks! As @davidfishlock pointed out in #16416 (comment):

There is currently a P0 Chrome bug affecting the use of hover media queries that breaks hover stylings.

This will be fixed in Chrome 133.0.6943.101 according to the issue log which should go out very soon.

[duprayae179dpl]

@philipp-spiess There seems to be two separate issues here:

1. Laptops with no touch support. The issue seems to happen in Chrome only, thus the P0 Chrome bug. Hover in other browsers works fine.
2. Laptops with touch support. This is the issue originally reported by @benweier-riotinto. I'm also having this exact issue. Happens on all browsers as the media hover query always returns false on devices with touchscreens, including touchscreen laptops.

My guess here is that all browsers have the same bug as Chrome and will report touchscreen devices as mobile only, thus disabling hover events. Even if Chrome fixes the issue on their end, it will persist in other browsers.

[philipp-spiess]

@duprayae179dpl I am not sure if your issue and the one reported by @benweier-riotinto are the same since the initial issue comment says that it works with Firefox and Safari and your commend says it does not work in any browser.

The way @media (hover: hover) works is that it will test wether your primary input device supports hover interactions. If every browser rejects this rule, I'd assume that your primary interaction is set to be a touch screen somehow. In Windows this means that tablet mode is enabled. Mind trying if that is the case?

If you indeed still have an issue in other browsers as well, it would be great if you could create a new GitHub issue and also test it against the playground I've added in the comment above here. Thank you!

[duprayae179dpl]

@philipp-spiess I completely mixed up OP's issue from another thread with the same issue. You are 100% correct on this. My issue is completely separate from this, but with a similar outcome that affects all browsers on my end. I did some more testing on my end and came to a conclusion that this seems to be intended behaviour... However, I just find it really odd. I'll explain my setup and issue...

I have a 2-in-1 Dell XPS 9310 laptop. It's a great little device. My setup at home and work has it folded backwards (not all the way) and it sits on a stand and acts as a 2nd monitor below my widescreen monitor. I have a docking station with a mouse and keyboard connected to it, so it's a full-on deskltop setup that I have. However, because the screen is bent backwards (tent mode) to sit on the stand, this kicks the laptop into tablet mode, even though my mouse and keyboard still work. And this is where my issue is on all browsers.

As soon as I unbend the laptop back to a proper laptop orientation, hover events work as intended on all browsers. So my issue here is completely unrelated and I apologize for putting the initial topic off track. It was just such an edge case, I couldn't figure it out for the life of me. So this thread essentially walked me through undertsanding the issue fully.

My only issue now is that I need to let Tailwind know that I'm on a desktop device and that the hover events should be working even with my laptop in tent mode. I'm sure I'm not the only one with the setup above, so this issue would affect that specific scenario. I think Tailwind should be checking if there is a pointer device (not touch) and enable hover events based off that. I think there's a media query to test for specific types of pointers. I might be wrong in my thoughts here, so please feel free to chime in.

[davidfishlock]

@duprayae179dpl if your device is in tablet mode then the screen will generally be considered the primary pointer.

You might get more luck out of using a custom variant with any-hover instead, but your device might not be reporting any hover capabilities at all.

In that case you'll just need to rely on the pseudo class as recommended previously.

You can see what support is reported here.

https://codepen.io/dukecroc/pen/dyzjmBB

Generally though, if you aren't using the device as a tablet it is best to turn off the tablet mode.

[esset31n]

@duprayae179dpl oh only just realised that Tailwind 4 bakes in the hover: hover query into the modifier without having to opt in through config. Sorry we are still on 3.x here.

As per @philipp-spiess comment here #16416 (comment)

@custom-variant hover (&:hover);

Should do the trick for Tailwind 4 users until Chromium fix this.

I'm using a regular laptop without any touch support. After upgrading to Tailwind v4, hover no longer works on Chrome. It does work properly on Edge, though.

The problem goes away after adding this override to my css:

@custom-variant hover (&:hover);

Windwos 11 Chrome: version 133.0.6943.60 (Official Build) (64-bit)

Can confirm this fix. Before implementation, Tailwind v4 only works with Firefox 135.0 (64-bit). (Laptop don't have touch support)

Edge: Version 133.0.3065.59 (Official build) (64-bit)
Chrome: Version 133.0.6943.59 (Official Build) (64-bit)

[adamwathan]

This should be fixed in Chrome 133.0.6943.99 which is available now 👍🏻 Try upgrading and with any luck everything should work as expected now.

[benweier-riotinto]

Confirming that the latest Chrome update fixes this

[vladyslav-pyrch]

The newest version of Chrome works perfectly fine. However, the latest version of Edge still has that bug (sadly it is my main browser). The good news is that one line @variant hover (&:hover); at the bottom of the CSS file fixes it.

Edit: my laptop does not support touch screen at all.

[mitchuman]

@custom-variant hover (&:hover);

Confirming this allows a "tap" to register as hover and apply styles on mobile iOS 👍

[philipp-spiess]

Given that we have confirmation that the latest Chrome update fixes the issue, I'm going to close this issue now. Thanks everyone for helping test this!

@duprayae179dpl Yeah I understand your setup now and your frustration and it's definitely something we're thinking about. A good next step would still be if you could try to go to this playground and report back which of the media queries show a hover for your device and which won't. Thank you!

[ailon]

@philipp-spiess the touchscreen (actually it's not about a touchscreen PC but one with built-in keyboard detached or flipped) mentioned by @duprayae179dpl is a long-standing Chromium-only bug that doesn't seem to be high on their priority list. This issue is from 2023 is here and there were older ones (iirc).

I've been hitting it (as a user) for 10+ years here and there (most notably Spotify's desktop client) but it's going to get a lot worse now that Tailwind relies on this buggy behavior.

[duprayae179dpl]

Sorry for the delayed response. Work got in the way this week.

@davidfishlock I'm attaching a screenshot from your CodePen link.

@philipp-spiess Only the first element in your playground hovers for me. The remaining 3 elements do nothing.

I also wanted to note that the screenshots above are using Chrome 133.0.6943.99. I just updated it to be sure. I can also confirm that I'm still having the hover issue with the latest Chrome release. My issue is definitely not the same issue that the other Chrome-only users are having here.

[davidfishlock]

@duprayae179dpl your screenshot shows you that your device reports no hover capability whatsoever when it is in tablet mode.

As I recommended previously, it's best to turn off tablet mode when using it as a desktop if you wish it to behave like a desktop.

If you want the css to apply hover regardless of the support reported, you should use the custom variant provided. But that will likely present the issue of hover states sticking when you use it as a tablet.