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

[tobiaspickel]

Hey,
we do use tailwind 3 in a huge project that needs to support very old browsers.
As stick to v3 for now most likely means stick to v3 for ever.
What is the plan to maintain v3 for projects that are stuck now?
Or are there any plans to improve the v4 compatibility for legacy projects?
I cannot imagine that we are the only ones facing this issue 😅.

[sapiyans]

I created a site on the Tailwind V4 and was totally broken transpilation it didn't work, so I created a plugin using V3 so it is not completely broken in the old browser. See before and after: https://www.npmjs.com/package/vite-plugin-tailwind-legacy?activetab=readme

[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.

[Jaystar-Bee]

Due to this issue, html2pdf throws error Error: Attempting to parse an unsupported color function "oklab". Seems like this compatibility is going to cause major issues

[sapiyans]

I created a site on the Tailwind V4 and was totally broken transpilation it didn't work, so I created a plugin using V3 so it is not completely broken in the old browser. See before and after: https://www.npmjs.com/package/vite-plugin-tailwind-legacy?activetab=readme

[flawrist]

Tailwind v4 is a modern plague. I've lost count of how many tools it has reduced to inaccessible, gilded trinkets that cannot be used on a browser older than last Christmas. The developers of this CSS framework seem to lack an understanding that the web is built on progressive enhancement, the core of which is backward compatibility. Forcing the OKLCH color space without classic HEX or RGB fallback is nothing but a tech-fed myopia — all for a wide-gamut shade of blue invisible to the average user.

[zounar]

Criticizing a library that has shaped web development worldwide and is provided to you for free is not a solution. The maintainers have to draw the line somewhere; they can't cater to everyone and every situation.

oklch has been supported in browsers since 2023 and is available on 94% of devices. The compatibility of Tailwind 4 is well documented, and v4 is built on several other post-2023 features. Wanting to use v4 features while staying compatible with pre-2023 browsers is contradictory.

If the previous workarounds (which take a minute to apply) don't work for you, you should consider living with v3.

[flawrist]

Shaping the world isn't a virtue. Plenty of ugly things shaped the world: smoking in movies, leaded gasoline, asbestos in every wall. All of them embraced, all of them defended, all of them imposing costs on people who never signed the contract. Nobody was catering to everyone — they were setting the terms. And setting the terms, free or not, isn't above criticism.

What is the Web? Substance and style. As Tim Berners-Lee, who invented it, says: “On the Net, you find computers — on the Web, you find information… people are interested in information… and don’t really want to have to know about computers”. Tailwind v4 turns style into a gatekeeper, an obstacle to the information flow.

OKLCH isn’t the problem here. Making it the only way to define color is. A one-line fallback costs nothing. That’s not anti-modern — it’s progressive enhancement, known since the early 2000s. We’re talking about colors — the basics, not fancy geometry features like grid or flex. If layout shifts, it’s ugly. If color fails, it’s unreadable.

Red as #ff0000 has worked since the first browser, while OKLCH’s whole pitch is wide-gamut displays. Not every school lab, library terminal, locked-down enterprise box, or refurbished PC has one, or a browser from the last few years. Those machines aren’t in Caniuse stats. And Caniuse isn’t a census. Neither are the people who block tracking beacons, sick of being hamsters on the update wheel.

Mandating a new device or an unwanted upgrade just to read text does not serve users — it sorts them into first-class and forgotten. That's not a baseline — that's segregation for the 21st century. And you call yourself engineers?