Make tailwind favor rgba() instead of rgb(/var(--tw-text-opacity))

Question

My iOS device is older, so in Safari some colors are not showing. I don't know why, but I'm guessing it's due to how tailwind is setting text-color or background-color to use rgb but with a /opacity-value for instance:

Using class="text-blue-600" creates this CSS to be applied:

.text-blue-600 {
  --tw-text-opacity: 1 !important;
  color: rgb(37 99 235/var(--tw-text-opacity)) !important;
}

Or doing class="bg-gray-200" causes this CSS to be applied:

.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235/var(--tw-bg-opacity));
}

I wanted to test if this is what's breaking the CSS on old Safari on iOS 10. Is there a way to tell tailwind to use rgba which I think should be supported.

Answer 1

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

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
    }
  }

Answer 2

You can use postcss and postcss-preset-env plugin, Its will convert rgb to rgba by default