tailwindcss icon indicating copy to clipboard operation
tailwindcss copied to clipboard

[v4] Chrome ~v103 chokes on comma in .bg-gradient-* Utility

Open bryanveloso opened this issue 3 weeks ago • 1 comments

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!

bryanveloso avatar May 08 '24 19:05 bryanveloso