PostCSS Color Rgb Tailwind

PostCSS plugin to transform modern CSS Color Module Level 4 to legacy CSS Color Module Level 3.

I had a problem with Tailwind v3 not displaying color properly on Safari <= 11.1 and looked for a solution. The first one I found was onigoetz/postcss-color-rgb, but it didn't work because of onigoetz/postcss-color-rgb #1. In the issue, the author mentions his plugin 7studio/postcss-color-rgb and it works flawlessy.

Installation

With NPM:

npm install giacomoferretti/postcss-color-rgb-tailwind

With Yarn:

yarn install giacomoferretti/postcss-color-rgb-tailwind

With PNPM:

pnpm install giacomoferretti/postcss-color-rgb-tailwind

Usage

Add plugin to postcss.config.js file:

module.exports = {
    plugins: {
        "postcss-color-rgb-tailwind": {},
    },
};

Example

Input

.example-1 {
    color: rgb(255 0 0);
}

.example-2 {
    color: rgb(0 0 255 / 55%);
}

.example-3 {
    color: rgba(0, 255, 0, 30%);
}

Output

.example-1 {
    color: rgb(255, 0, 0);
}

.example-2 {
    color: rgba(0, 0, 255, 0.55);
}

.example-3 {
    color: rgba(0, 255, 0, 0.3);
}