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

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.

tailwind-css

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

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

Sources

Related Questions