PostcssRgbCompat

Tailwind 3 started to use the new rgb-syntax with the opacity "/ notation" (see under). This broke browser support for iOS 12 and older. To mitigate this, this PostCSS-plugin converts the CSS-output back to the more compatible rgba()-syntax (with a simple regular expression).

Example

This is an example of the Tailwind 3 output:

.bg-yellow {
background-color: rgb(255 192 0/var(--tw-bg-opacity));
}

Converted with this plugin, we get:

.bg-yellow {
background-color: rgba(255, 192, 0, var(--tw-bg-opacity));
}

Resources

This guide is based on version: 1.0.0