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

[bryanveloso]

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!

[ekwoka]

This is an issue with the older browsers. I believe tailwind before would put a comment in there like /*tw*/ as it was a known issue that older browsers would have issues with a comma and no space afterwards before the ) but minifiers would always remove the space.

if you try

.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops, ));
}

you should see that that works as well.