Tailwind v4 not working with Safari 15

[nevil2]

I've updated a project to v4.
It is working on most browsers but does not work on Safari 15.6.1 running on Catalina 10.15.7.
Should/can it work, or is Tailwind dropping support for older browsers.

[adamwathan]

Hey! Yeah v4 targets Safari 16.4 and up, has some important features we depend on like @property and color-mix(…) and since we only do a major version every 2-3 years we decided to target pretty modern browsers to keep the shelf life of v4 as high as possible. If you need to support older browsers I'd recommend using v3 until you can drop support 👍

[adamwathan]

Wait, does that mean that sites built with Tailwind v4 just won't work (not guarantee to work) on devices from before 2023?

iOS 16.4 is supported as far back as the iPhone 8 which was released in 2017.

are there any plans on how long v3 will be supported (at least for fixing security issues and compatibility with the ecosystem)?

We'll definitely release patch releases as necessary for major issues for at least the next 18 — 24 months, for example making sure it continues to work with popular frameworks like Next.js or new versions of PostCSS, webpack, etc. We won't be adding any new features or fixing long-standing minor bugs that have workarounds or anything like that though, just compatibility issues.

[alexchexes]

iOS 16.4 is supported as far back as the iPhone 8 which was released in 2017

While the share of iOS users on pre‑16.4 versions is globally less than 0.5%, that percentage still represents hundreds of thousands (if not millions) of people, given the sheer scale of internet users worldwide.

Moreover, in poorer countries, the dynamics is quite different - users often hold onto their devices for longer periods, so the proportion of Safari users on older versions could be noticeably higher.

It’s totally reasonable to drop support for advanced features on older browsers, as long as there’s a fallback that prevents the site from becoming completely unusable. For example, it might be acceptable if certain styles degrade - like colors appearing off or advanced interactive features not working. But by removing colors (which are essential for users to actually see the site) we're essentially rendering all Tailwind v4 websites unusable for hundreds of thousands of users worldwide. That level of degradation is not acceptable on a library level, I.M.O.

[FrenzyExists]

I was almost loosing my mind trying to figure out why i could not get tailwind to work on safari until i got here.

I agree with the above comment, its ridiculous to drop support on safari browsers, for me I'm on a 2019 mac with macos 14.5. I don't know you but 2019, 2020, and even as recent as 2023 isn't really a long time ago. Maybe in the US you get a phone every year but that's not a thing everywhere else in the world. Lots of peeps hold to their devices 7, 8 even 10+ years. Why now make a functional site now useless because not even colors work?

[ansf]

@adamwathan

We'll definitely release patch releases as necessary for major issues for at least the next 18 — 24 months, for example making sure it continues to work with popular frameworks like Next.js or new versions of PostCSS, webpack, etc. We won't be adding any new features or fixing long-standing minor bugs that have workarounds or anything like that though, just compatibility issues.

That's good news. Thanks 👍

[sdavids]

tailwindlabs/tailwindcss.com#2102

It would be nice if this info were not buried in a discussion about Safari 15.

[Azarattum]

Safari is such a pain to update. Especially on phones where it is linked to your iOS version which is capped by your phone model. So, to update the browser you literally have to buy a new phone!

[fabb]

Browserslist says 0.47% world-wide, 0.88% north america, 0.56% europe:
https://browsersl.ist/#q=Safari+%3C+16.4

[Azarattum]

There is a difference though in cutting a percentage of users who just need to hit an "update" button and who would literally have no way to access your website anymore.

If an app would do this, I could get their decision. But doing this on a library level is much much worse. You are making this decision for thousands of developers and their apps who may have millions of users. Even small percentages become big numbers here.

[frederikhors]

Yeah. These numbers say nothing. We have hundreds of devices in retail stores using not upgradable Safari 15.

[fabb]

I agree. There’s a difference between a page with a few visual issues on older devices and a completely unusable page.

[davecarlson]

major issues for us have been:

• invisible buttons ( as the bg-color isn't showing, but text-white DOES work)
• invisible inputs ( due to the border- not working, where the input fields are transparent background or white background with borders) .
  AS mentioned lower down, @csstools/postcss-oklab-function and postcss-nested have improved things somewhat, but it's by no means perfect

[alexchexes]

The second one is Safari 15.6.

This is just insane.

Rolling back to v3, but it's too bad that we had already updated to v4 before realizing that it no longer works for a broader audience. Upgrading is easier than rolling back, there's no "v4-to-v3" migration tool, sleepless nights are ahead...
Also, some libraries, like tailwind-merge, have dropped support for v3, making things even worse... How did we get to this point

[frederikhors]

Rolling back to v3, but it's too bad that we had already updated to v4 before realizing that it no longer works for a broader audience. Upgrading is easier than rolling back, there's no "v4-to-v3" migration tool, sleepless nights are ahead...
Also, some libraries, like tailwind-merge, have dropped support for v3, making things even worse... How did we get to this point

We're in the exact same situation.

Instead of rolling back, how about we join forces to create a workaround? I tried using lightningcss but there are issues. Can you help?

[alexchexes]

lightningcss

It doesn't seem to transpile any of Tailwind’s "cutting-edge" CSS. For instance, all these lines from the Tailwind v4 output remain unchanged:

--color-red-500: oklch(.637 .237 25.331);

color: color-mix(in oklab, var(--color-slate-500) 5%, transparent);

color: color-mix(in oklab, currentColor 50%, transparent);

playground

[hdy1023]

We're in the exact same situation.

Instead of rolling back, how about we join forces to create a workaround? I tried using lightningcss but there are issues. Can you help?

I have resolved the issues related to oklch, oklab, and css-nesting by using the plugins @csstools/postcss-oklab-function and postcss-nested of PostCSS . Currently, theme color and space-x-* are working on Safari 15.

I'm still trying to find a solution for the color-mix problem. Although PostCSS has a plugin (@csstools/postcss-color-mix-function), it can only handle static values and is unable to deal with Css Var.

If you have any good ideas, you are welcome to share and communicate them.

[fabb]

@hdy1023 awesome, thank you for sharing!
Have you found a way to backfill @property?

[hdy1023]

@hdy1023 awesome, thank you for sharing! Have you found a way to backfill @property?

I find that @property is not used much.
If it has impacts in your project, you can manually replace it with CssVar and assign a default value.

[devhe4d]

I have css issues with Safari 18 on macOS Sequoia (15.3.1) even. the bg-xxx-xxx doesn't work what does that mean? should I migrate everything to v3? couldn't we have some sort of polyfills ?

update #1: for every change to reflect on Safari 18, I need to to CMD+OPTION+R to hard refresh the page ( background appears once I do this )

Update #2: the issue is Turbopack, if you are using Next.js + Turbopack, change it to Webpack instead and it will work just fine

[shashanksrajak]

It does not work with Safari v18.1.1 as well, I just setup NextJS with Tailwind v4 and used safari to test out, but it does not work. While it worked on Google Chrome.

[devhe4d]

It does not work with Safari v18.1.1 as well, I just setup NextJS with Tailwind v4 and used safari to test out, but it does not work. While it worked on Google Chrome.

the issue is Turbopack, if you are using Next.js + Turbopack, change it to Webpack instead and it will work just fine

[zulfiismailovdemiri]

just remove class name "relative" from body or there where you use bg-gradient-to-* from-- to--

[Eptagone]

I also had some problems like borders not showed (previously reported in #15506) and colors but fortunely, I fixed them using lightningcss and custom transformers. Sadly, there're still some issues with the custom-mix function and maybe others that I haven't detected yet.

I've published a gist here in case it helps.

[Azarattum]

#17435 seems promising. Has anyone from this thread tested it yet? What features are still missing if we upgrade from v3 to v4 for Safari 15? Or is v4 now fully backwards compatible with this PR?

[mustafa0x]

The migrate script (@tailwindcss/upgrade) really should've had a HUGE RED WARNING that this'll break the site/app for anyone with a browser more than 3 years old. :(

And we've only noticed issues a few weeks later, so we can't simply git reset --hard HEAD^.

I appreciate that the team is working on compat with the 4.1.0 and later releases.

[RobinMalfait]

Update to the latest version and you should be good to go 👍

https://tailwindcss.com/blog/tailwindcss-v4-1#improved-compatibility-with-older-browsers

[mustafa0x]

Thanks @RobinMalfait! Is Chrome 87 supported?

[RobinMalfait]

Hmm that's a different story. Obviously a lot of features that aren't available in the browser won't work. Colors degrade way better now, but probably not as far as Chrome 87. That said, I assume if you want to support old browsers like that, that you are already working with hex colors instead of more vibrant colors.

So in short, it's going to depend on what you use right now. So I would suggest to bump to the latest v4.1.* version which should already have much better support, but you will have to test your app/website to see where things are still lacking.