Anyone here who is using Tailwind and needs to support old browsers? What plugins do you use to get around?

[cerinoligutom]

Thought we could have a discussion regarding this and hopefully shed some light on anyone interested but are working on projects that need to support old browsers.

So what PostCSS plugins do you guys use to get around your modern css properties?

---

To start...

Recently, I've been trying to make css variables work with IE11 but postcss-custom-properties and postcss-css-variables aren't up to par for my needs. One use case is for theme switching.

postcss-custom-properties only targets css variables declared in the :root selector.

postcss-css-variables's caveats is a deal breaker. Also, trying to use it with Vue and the build gets stuck when it tries to process tailwind.css.

Still no luck lol

[adamwathan]

The way we use custom properties for transforms is not polyfillable unfortunately, so if you need to use transforms in your project we recommend writing your own transform classes.

Similarly, our CSS Grid implementation is not compatible with IE11 even with polyfills.

With Tailwind, your best bet is to just only use the CSS features that are actually supported by the browsers you need to support. For example if you need to support IE9, you can't use our flexbox utilities because IE9 simply doesn't support flexbox.

In your case you mention theming — if you need to support IE11 I would completely abandon the idea of using CSS custom properties because it's simply not going to work, even without using Tailwind at all. I would consider making theming just not work for IE11 users if I were you, as it's a very small percentage of users.

Hope that's helpful.

[nuxodin]

Did you tried https://github.com/nuxodin/ie11CustomProperties ?
I am doing relatively large projects that support IE11 without caring much about IE11 in terms of CSS variables

[tlgreg]

There are js based polyfills too that might work better, but they also have their own limitations and can mess up the specificity of the classes (might not be an issue just for transforms).
Example: https://github.com/nuxodin/ie11CustomProperties
I did not test it myself, but it might worth a try.

[natzar]

This is a problem, Safari 10, the one I have installed, its showing awful website...

Have support for newer browsers only isn't cool, web should be open for everyone... not just for the ones having last iPhone. After having made a lot of work to migrate to tailwind, this is very disappointing, cannot roll back, cannot be happy with the result.

[zaynelovecraft]

how to fix this ?

[j-joker]

@adamwathan in this case, what can we do to polyfill tailwind's use of css var

[sntran]

I have been there. If you need to support IE, my suggestion is not to use Tailwind. Implementing your own CSS as you needed would still be quicker than trying to get Tailwind to work there.