tailwindcss: Force tailwind to use compatible rgb syntax?

Question

I'm porting an app using tailwindcss to work with IE11. Unfortunately, tailwindcss insists on generating colors using the modern W3C CSS Color Module Level 4 rgb() syntax, which does not appear to be working in IE, e.g. it generates classes like these:

.bg-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-bg-opacity));
}

I have tried using postcss-color-rgb in my postcss pipeline to transform this back into the usual syntax to no avail:

postcss([
    require('tailwindcss')(twConfig),
    require('postcss-color-rgb'),
    require('autoprefixer'),
]).process(cssContent, {
    from: css,
    to: `build/${name}.css.tmp`
})

Tailwind claims to be compatible with any modern browser, which some might dare to classify IE11 as. Any thoughts on getting tailwind to play nicely with IE11 here?

Answer 1

Tailwind will use this syntax when the background opacity utilities are enabled.

If you disable it, it will use the regular hex syntax for colors, so you don't even need the postcss-color-rgb post css plugin anymore!

You can disable this by adding this to your tailwind.config.js:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...

     backgroundOpacity: false,
    }
  }

In my case, I had a similar issue with text and border colors. You might need to experiment and figure out which of these "opacity" utilities are causing you trouble. For my project, I disabled all of them:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
        backdropOpacity: false,
        backgroundOpacity: false,
        borderOpacity: false,
        divideOpacity: false,
        ringOpacity: false,
        textOpacity: false
    }
  }