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 👍

[kieranstartup]

Just ran into this testing a site on Safari 15.6 this morning and wondering why half the site is broken. Going to downgrade to v3 for the time being.

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

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