tailwind-color-alpha weekly downloads statistics

Automatic alpha variants for your Tailwind CSS colors based on your opacity config

Why?

Tailwind only supports opacity but sometimes you need to apply semi-transparent background/border or text.

You could tweak your Tailwind configuration like this

But it's repetitive, confusing and error prone. We can do better.

Install

npm install --save-dev tailwind-color-alpha

The plugin will automatically use your colors and opacity config to generate all the corresponding rgba values

Examples

The configuration above yields the following utilities:

Notice that a color named red.default will end up generating text-red and so we follow Tailwind's convention with bg-red-alpha-${opacity}