Tailwind CSS color opacity with a variable not working

Question

const Home = () => {
    const variableOpacity = 0.85;
    return (
        <>
            <main>
                <div className={`h-8 bg-primary/[${variableOpacity}]`}>85%</div> 
           </main>
        </>
    );
};

What I am trying to achieve here is to make a Progress bar where I need the background color of a div to change as per a variable. I am using custom opacity like bg-primary/[0.85] and when I type this in the div it works but it doesn't work using a variable with same value as in the code sample. Actually, it works when the variable's value is 0.3 but it doesn't work for any other values.

My Tailwind Config

Answer 1

Creating dynamic classes in tailwind won't work. That's because tailwind searches for your classes during build time and will only bundle the classes that it explicitly finds on source code.

The solution for what you want to do is to use the style props instead. Something like this:

const Home = () => {
    const variableOpacity = 0.85;
    return (
        <>
            <main>
                <div
                    className={'h-8'}
                    style={{backgroundColor:`rgba(51, 170, 51, ${variableOpacity})`}}
                >85%</div> 
            </main>
        </>
    );
};

Of course, as you have seen, you must specify the color in rgb notation (values in range 0-255 and opacity in range 0-1).