I recently upgraded my two main projects from Tailwind v1 to Tailwind v2. Tailwind is a CSS utility framework which improved my usage of CSS in a major way, and I wanted to switch to the new version as soon as possible, just to keep up to date.

The problem: One of the projects should maintain as much Internet Explorer 11 compatibility as possible for now, so the page stays at least useable, yet Tailwind v2 removes support for IE11. So what does that mean?

Colors

Tailwind v2 uses color definitions that are not compatible with IE11. With Tailwind v1 it had a fallback specifically for IE11, but v2 removed these, they now look like this:

.text-black {
  --tw-text-opacity: 1;
  color: rgba(0, 0, 0, var(--tw-text-opacity));
}

The CSS variable part is not supported by IE11, so IE11 does not understand this. Any border colors, text colors, background colors and similar will therefore not work with IE11 and Tailwind v2. In my project I only used a handful of colors anyway, so I added them to my CSS, this is a small excerpt:

.bg-white {
  background-color: #fff;
}

.bg-gray-400 {
  background-color: #cbd5e0;
}

.bg-yellow-200 {
  background-color: #fefcbf;
}

.border-white {
  border-color: #fff;
}

If you are using many of these classes this might be a bit tedious. You can find your usages of colors in the generated Tailwind CSS output by looking for --tw- to find the usages of Tailwind variables - I easily found all color usages that way.

clearfix

The clearfix class in Tailwind was used to clear floats in v1. With flexbox and other newer CSS techniques this is less necessary nowadays, but I still have some uses of clearfix in my design. The Tailwind v2 upgrade guide says to replace all uses of clearfix with flow-root. But to support IE11 I also added this to my CSS:

.flow-root:after {
    content: "";
    display: table;
    clear: both;
}

This is the exact CSS code of the clearfix class in Tailwind v1 and just a temporary fix until IE11 support is dropped completely in my application.

Any other problems?

I looked through the changes done to drop IE11 support and to me it does not seem much else was changed in a major way that should cause problems in most applications.

When using utility classes you are still mainly responsible yourself if it works in IE11, as you are just combining CSS rules and those might or might not work in IE11. If you encounter any other problems with IE11 and Tailwind v2, you can share them in the comments!