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

module.exports = {
  theme: {
    colors: {
      primary: "#2b2e4a",
      "primary-10": "rgba(43,46,74, 0.1)",
      "primary-20": "rgba(43,46,74, 0.2)",
      "primary-75": "rgba(43,46,74, 0.75)",
      // ...
    },
    // ...
  },
};

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

Install

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

module.exports = {
  // ...
  plugins: [require("tailwind-color-alpha")()],
};

The plugin will automatically use your colors and opacity config to generate all the corresponding rgba values for your text, background, border, fill and stroke utility classes respecting your variant settings for each.

Examples

module.exports = {
  theme: {
    colors: {
      primary: "#2b2e4a",
    },
    opacity: {
      "25": ".25",
      "50": "0.5",
    },
  },
};

The configuration above yields the following utilities:

.bg-primary-alpha-25 {
  background-color: rgba(43, 46, 74, 0.25);
}
.bg-primary-alpha-50 {
  background-color: rgba(43, 46, 74, 0.5);
}
.text-primary-alpha-25 {
  color: rgba(43, 46, 74, 0.25);
}
.text-primary-alpha-50 {
  color: rgba(43, 46, 74, 0.5);
}
.border-primary-alpha-25 {
  border-color: rgba(43, 46, 74, 0.25);
}
.border-primary-alpha-25 {
  border-color: rgba(43, 46, 74, 0.5);
}
.hover\:text-primary-alpha-25:hover {
  color: rgba(43, 46, 74, 0.25);
}
.focus\:text-primary-alpha-50:focus {
  color: rgba(43, 46, 74, 0.5);
}

/* and more... */

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}