tailwind 4 oklch not compality with old browser

[jesse996]

tailwind 4 okhlc not compality with old browser,how to config to use old rbg rather than oklch

[adamwathan]

Hey! Tailwind 4 uses a lot of other features that aren’t compatible with older browsers so just changing this wouldn’t be enough to fix it. For v4 we’re targeting Safari 16.4 and above and recent versions of Chrome/Firefox. For older browsers you should stick with v3 for now 👍🏻

[jesse996]

ok i see,thank you for your answer

[brennanangel]

This blog post says Lightning CSS would transpile it in 4.0.

"Syntax transforms — modern CSS features like oklch() colors and media query ranges are transpired to syntax with better browser support."

@adamwathan Is this Lightning CSS transpilation coming, or do you have a suggestion on how to add these as a fallback for those v4.0 devs who need to support older browsers?

[adamwathan]

Tailwind CSS v4.0 depends on other modern CSS features like @property and color-mix(), both of which only work in browsers that also support OKLCH, so our browser targets for transpilation do not transpile OKLCH.

Even if we did transpile OKLCH back to another format, you still couldn't use v4 in those browsers because those browsers wouldn't support @property. That feature specifically is very critical to how v4 works internally, so it's not possible to use v4 in older browsers that don't support it.

[davecarlson]

@adamwathan - It feels this wasn't signposted enough in the release notes. We've got a load of new bug reports of invisbile buttons on not that old ios devices ( due to the lack of loklch support ), so we're now going to hwave to go through and 'downgrade' to 3 until a proper solution is found

[alexanderbuhler]

@davecarlson Gonna leave that here for you, if you dare to tinker: https://gist.github.com/alexanderbuhler/2386befd7b6b3be3695667cb5cb5e709

[alexanderbuhler]

Here's a starting point that I got my project running with. Not perfect, but good enough. If you find something broken, let me know and I might have another look.

https://gist.github.com/alexanderbuhler/2386befd7b6b3be3695667cb5cb5e709

[zounar]

In my case, I have to support those older browsers, but I don't want to stick with Tailwind 3 just because of it. By changing the colors to rgb() and opting out from the @layer CSS rule, I was able to partially add support for older browsers. It's not perfect, but decent enough.

Check out this repo where I document those changes.