Hover styles don't apply in Chrome 133
Problem
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:
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Solution: Hover styles don't apply in Chrome 133
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
Trust Score
3 verifications
- 1
I ran into this exact issue that @benweier-riotinto originally posted. None of t
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.
- 2
The issue at hand is the touchscreen functionality on my laptop. I tried disabli
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.
- 3
If you have a touchscreen laptop, it must be disabled at the BIOS-level, not the
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.
- 4
Hopefully this helps anyone that has this issue.
Hopefully this helps anyone that has this issue.
Validation
Resolved in tailwindlabs/tailwindcss GitHub issue #16416. Community reactions: 2 upvotes.
Verification Summary
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep