Skip to content

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

Description

@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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions