Allow referencing a color with opacity in JavaScript/TypeScript

[eduards]

In Tailwind, it's possible to reference a colour and add opacity to it, e.g. text-red-400/25 to get red-400 but for 50% opacity (docs: https://tailwindcss.com/docs/text-color#changing-the-opacity)

It's also possible to reference a colour from within JavaScript/TypeScript, e.g. with tailwindConfig.theme.colours.red[400] (docs: https://tailwindcss.com/docs/configuration#referencing-in-java-script)

It would be a nice little feature to allow developers to get the colour with opacity from within JavaScript/TypeScript without having to implement their own logic (or use a library) to calculate the opacity or create separate colour tokens for each colour/opacity combination used in the app.

It might be offered as a utility function that could be imported separately. Or maybe as a more generic function to reference various arbitrary values from JavaScript, e.g. theme('colors.red.400/25') 🤔

[tratteo]

Hi, I stepped into this as I was looking for the same thing!
Just commenting to let you know that for the moment I found a way to achieve this quite nicely using the culori library. I defined this util function:

export function hexToRgba(hex: string, alpha: number = 1) {
    const color = culori.parseHex(hex);
    color.alpha = alpha;
    return culori.formatRgb(color);
}

And then I can get any tailwind color and apply opacity with the following code:

const rgba = hexToRgba(colors.orange[400], 0.4)

Cheers!

[andymerskin]

An even simpler solution if you don't feel like writing your own utility based on another library, we use Polished in our project, and it provides a simple rgba() function, with a few ways to use it. For HEX colors, it's simple:

const color = rgba("#000", 0.5);