Tailwind not working when using variables (React.js)

Question

currently have been facing this issue using tailwind and making rehusable react components where you can pass as a prop some styles as tailwind classes. The actual problem is with the "pb-{number}" propierty. I can pass it this way and will work fine. This also happens with "border-{number}" property, but someway it accepts border-2 and border-4 (only these).

import './button.css'
    
    export default function Button({
        color = "orange",
        inset = "pb-3", <--- this will work
        border = "border-8",
        className, 
        onClick, 
        link
        , ...props}){
        
        return (
            <div onClick={onClick}
            className={`btn-${color} ${border} 
            ${className} ${inset}`}> <--- this will work
                
                <div>
                    {props.children}
                </div>
            </div>

But if I try to make it cleaner so a person who don't use tailwind only has to pass a value (like the example below) it wont work.

import './button.css'

export default function Button({
    color = "orange",
    inset = "1", <--- this
    border = "4",
    className, 
    onClick, 
    link
    , ...props}){
    
    return (
        <div onClick={onClick}
        className={`btn-${color} border-${border} 
        ${className} pb-${inset}`}> <--- this wont work
            
            <div>
                {props.children}
            </div>                

        </div>
    )
}

Sincerely I have no idea why is this happening. Hope someone with more experience can clarify my doubt. Thanks in advance.

Yes, as the Tailwind docs state clearly this will not work https://tailwindcss.com/docs/content-configuration#dynamic-class-names your classes will be purged. — JHeth, Dec 25 '21 at 03:51
Do you know if there's a way to avoid general classes like in this case eg: padding, border,.... to be purged? Btw, thanks, didnt get why some composed classes were working while others don't, so if I get it right all the classes that have been used at least 1 time wont be purged? or it needs to be used at least one time within the component? — Francisco Alamino, Dec 25 '21 at 04:18
Sure, you can safelist classes https://tailwindcss.com/docs/content-configuration#safelisting-classes. You could even write a regex to define a long list of classes to safelist from purging. However, if this is a user-facing application or site it's better to avoid this behavior, it can cause some very large output files. — JHeth, Dec 25 '21 at 04:21

score 3 · Accepted Answer · edited Jun 23 '22 at 04:21

In tailwind you can't use dynamic class naming like bg-${color}, though we can mock it to be that, but it is not preferred. Because Tailwind compiles its CSS, it looks up over all of your code and checks if a class name matches.

For your approach you can try this.

const Button = () => {
  const color = "red-500";
  const inset = "3";
  const border = "border-8";
  return <div className={`bg-${color}  ${border} pb-${inset}`}>Hello</div>;
};

export default Button;

Output with proper padding is applied

But try avoiding this workaround, as it is not recommended by the Tailwind CSS.

Tailwind not working when using variables (React.js)

1 Answers1