Maintaining Tailwind in Legacy Environments – v3 LTS or v4 Polyfill Options?

[tobiaspickel]

Hi everyone,
We've recently migrated our website to Tailwind CSS v3, which has been working great for our needs. However, we're required to support a fairly broad range of older browsers—including Safari 10, Firefox 80, and Chrome 80 —which v3 handles without issue.
We're currently evaluating Tailwind CSS v4, but running into compatibility challenges due to the reliance on newer CSS features. We've experimented with polyfills, but haven't had success in getting them to work reliably across our supported browsers.
A couple of questions for the team or the community:

• Are there any official recommendations for projects that need to maintain support for older browsers while upgrading to Tailwind v4?
• Are there plans to continue maintaining Tailwind v3 with security/bugfix updates for those of us who are effectively locked in due to legacy browser constraints?
• Alternatively, is there any guidance or documentation in the works on how to reliably polyfill the necessary features for v4?

We’d really prefer not to fall back to vanilla CSS, as Tailwind has been a huge productivity and consistency boost for our team. Any advice or roadmap insights would be appreciated.
Thanks!

[sdavids]

tailwindlabs/tailwindcss.com#2102

[sapiyans]

Tailwind v4 Compatibility Solution for Legacy Browsers

I completely understand the concerns about Tailwind v4's modern CSS features (like oklch()) breaking in older browsers (Safari 10, Firefox 80, Chrome 80, etc.). Like you, I found that polyfills didn't work effectively.

My Solution:
I created a system that:
• Automatically serves Tailwind v3 as a fallback for legacy browsers
• Maintains v4's full capabilities for modern browsers

Test Results:
✓ Worked perfectly in Chrome 85+
✓ Full compatibility with other legacy browsers
✓ Zero impact on modern browser performance

https://www.npmjs.com/package/vite-plugin-tailwind-legacy