What should IE11 compatibility with Tailwind 2.0 look like?

[JNavith]

Tailwind 2.0 has/will be removing IE11 compatibility from the core, but it's theoretically possible to reintroduce it with a plugin / preset. The point of this discussion post is to start talking about that now to prepare for 2.0's release, i.e. come up with a community solution(s) for people who are dependent on IE11 (instead of it being a shock for them).

Please be kind about this decision and don't use this space to complain.

[JNavith]

These are my first thoughts:

API

// tailwind.config.js
module.exports = {
  presets: [
    require("tailwindcss/defaultConfig"), 
    require("hypothetical-tailwindcss-ie11/preset"),
  ],
};

Ideally, this preset adds the "ie11" variant plugin and tells all the color utilities to use it

Color utilities

This pull request shows all the changes made to remove IE11 support:
#2571

We can't reach into the core plugins, so hopefully we can do something close: use addVariant to register an "ie11" variant. This variant uses the low level container API to look at the background-color: rgba(x, y, z, var(--bg-opacity)); and replace it with background-color: rgb(x, y, z);

Base styles

This pull request shows all the changes made to remove IE11 support:
#2572

Have a human review it and use addBase to reintroduce all the removed stuff.

[torian257x]

great idea.

I recommend it to include it into the docs and be prominent about it too.

[papistan]

Is this in roadmap for next version of 2? Really wanting to move to 2, but support for ie11 is key for us (still pretty widespread in many industries 😭 )

[papistan]

Dang. Alright, thanks for response!

[torian257x]

do we know if there is a community solution for it? if I google, this github issue is the main thing that pops up.

[JNavith]

do we know if there is a community solution for it? if I google, this github issue is the main thing that pops up.

No. Like you said, this is the first thing that comes up, so if anyone was interested in making Tailwind 2.0 have an IE11 compatibility plugin, it would be here.

Someone wrote this blog post showing them manually adding IE11-compatible definitions for color utilities.

[davidwebca]

I made a test with postcss-css-variables because it seemed to be covering many more edge cases than postcss-custom-properties, but it ended up having issues with transforms and everything that uses the variables inside other values (translate(), calc(), etc.). I'd have to test it again on some other use cases. I fell back on using tailwind 1.9 for a project recently because of that since it was signed a long time ago and the contract specified ie11. 🤦‍♂️ But having a community plugin based on one of these postcss plugins should be doable.

[MoishyS]

my main issue is the rgba color - which you can use postcss-color-rgba-fallback

[glebmachine]

Jeez, Houston we have a problem(
We've got a huge online banking application, with a lot of enterprise clients, based on IE11. We can't drop IE11 support

@papistan @adamwathan @jossnaz did you found any working solution, guys?

[adamwathan]

Hey! If you need to support IE11, I recommend just using Tailwind 1.x 👍

[papistan]

@glebmachine - nope, we're using 1.9.6 until we drop support for IE11. Despite missing some features of newer versions, it's still amazing and our team is super happy with it (gracias @adamwathan !).

[chris-tietgen]

We've got a huge online banking application, with a lot of enterprise clients, based on IE11. We can't drop IE11 support

Well, considering Microsoft is dropping Internet Explorer in Windows 10 next June, you might want to start looking at upgrading your app. Unless your clients are also running an outdated OS?

Technically, you can configure Edge to allow sites to load in Internet Explorer compatibility mode, but I tried one of our legacy sites in it and it didn't work the same as it did in actual IE11, so this may not be an option for you. Also, you would have to instruct your customers to enable this setting in Edge and who wants to deal with that?

[poindexterous]

I have a similar issue to @glebmachine: we have enough incoming business from people using legacy browsers that we can't drop support (it's a small percentage of customers but that's still bring in to many millions in revenue though ecom channels). We looked at adding our site to the microsoft registry- the one where you can force edge to open your site when someone in IE makes their way to your URL - but we realized this is too much of a jarring experience for the customer and it would negatively impact our conversion rates for that customer segment. At the same time I completely understand Tailwind 2.0 needing to move on, but for enterprise businesses that have no choice but to support IE an optional preset would be a much appreciated compromise for the mid-term.