bug(v4): gradients not working on CEF with chrome version: 103.0.5060.141

[vipexv]

What version of Tailwind CSS are you using?

4.0.0

What build tool (or framework if it abstracts the build tool) are you using?

Vite 6.0.11

What version of Node.js are you using?

v22.13.0

What browser are you using?

For example: FiveM CEF Browser, Chrome Version: 103.0.5060.141

What operating system are you using?

For example: Windows

Reproduction URL

Try to use Tailwind CSS V4 Gradients on FiveM, it will cause issues and will not work, this is due to the fact that they are using an outdated chrome version, which i cannot change.

Describe your issue

Gradients don't work on FiveM CEF, that's what FiveM uses for NUI, most Cfx.re projects do, basically some of these new "modern" features cause things to break, is there a workaround?

[vipexv]

Atleast an option to make it compatible, idk i like allot of the other changes of v4, having to switch back is just not it, please!

[vipexv]

Another feature that doesn't work on FiveM using Tailwind CSS v4 is the color opacity thingy, when i do text-white/30 it doesn't work, its just white, in an up to date browser it does work, anyway i can make these work or atleast make these future proof and just keep the old versions of the gradient/color system?

[kimdanielarthur-cowlabs]

v4 linear gradients also break on older iphone safari Mozilla/5.0 (iPhone; CPU iPhone OS 15_8_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148

The problem is the new v4 usage of oklab colour model. If i remove the "in oklab" from the linear-gradient instruction it renders fine, attempting to use a different colour model like srgb still fails on these old devices so it seems its the colour model markup itself.

Is there a way to inform tailwind to drop the "in colourmodel" styling instructions completely?

[RobinMalfait]

Hey!

Unfortunately we rely on some modern features for Tailwind CSS v4, which is why we rely on relatively modern browsers (https://tailwindcss.com/docs/compatibility)

• Chrome 111 (released March 2023)
• Safari 16.4 (released March 2023)
• Firefox 128 (released July 2024)

Right now there are no plans to support older browsers than the browsers listed above because then we would not be able to use modern features unfortunately.

For the colors where you can use bg-red-500/50, this relies on the color-mix() function in CSS to apply the transparency to a certain color.

For the gradient related issue, if in oklab is a problem (the default), you can use in srgb or in hsl using the modifier bg-linear-to-*/srgb or bg-linear-to-*/hsl. More info: https://tailwindcss.com/docs/background-image#changing-interpolation-mode

Sorry about the inconvenience.

Hope this helps!

[kimdanielarthur-cowlabs]

Using /srgb doesnt work as per thr comment, it still adds the "in srgb" which causes failure. Is there a way to override or exclude any "in colourspace" instruction?

[RobinMalfait]

Oh sorry I misread, I thought the issue was that we were using in oklab with oklab colorspace but it's for all color models.

Right now there is no way to get rid of the in <color space>. What you can do is use arbitrary values (or use CSS) to create custom gradients that don't use that feature.

[vipexv]

Yeah the guy's over at Cfx/Rockstar are most likely not going to upgrade chromium for awhile (if ever), as their prioritizes are in making money by developing a new payment platform so they can migrate off Patreon so they don't have to deal with Patreon taking a cut even though there are issues open that have been there for months/years.

I'll migrate back to v3 for now, but please in the future if you can and if you want to just add some sort of compatibility layer.