tailwindcss
tailwindcss copied to clipboard
[v4] Chrome ~v103 chokes on comma in .bg-gradient-* Utility
Tailwind Version: next
using Vite plugin
I've been using Tailwind to design overlays in OBS Studio for years now. Recently decided to take the jump and try next
. Ran into an odd problem in which none of my defined bg-gradient-*
styles would show up in OBS' browser source.
"Offending" line: https://github.com/tailwindlabs/tailwindcss/blame/5e737d858755a7149e17b5f3feaeb0d42865354d/packages/tailwindcss/src/utilities.ts#L2490
Taking the example code from the documentation:
<div class="h-14 bg-gradient-to-r from-cyan-500 to-blue-500"></div>
Inspecting .bg-gradient-to-r
in Chrome 124:
.bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
Inspecting .bg-gradient-to-r
in Chromium 103.0.5060.134 (OBS Studio's version):
.bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops,));
}
The comma persists in the older version of Chromium, which breaks the style. Removing the comma manually fixed it. I don't file issues all that often, so I'm not sure if this is an actual bug with tailwind@next, or if I should be heading over to OBS to try to get them to upgrade their Chromium version.
Either way, please let me know if anything further is needed!