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 tailwindcss.com/docs/content-configuration#dynamic-class-names your classes will be purged. — JHeth
– JHeth, Commented Dec 25, 2021 at 3: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? — Joyboy
– Joyboy, Commented Dec 25, 2021 at 4:18
Sure, you can safelist classes 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
– JHeth, Commented Dec 25, 2021 at 4:21

marc_s · Accepted Answer · 2022-06-23 04:21:38Z

5

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.

edited Jun 23, 2022 at 4:21

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Jun 5, 2022 at 13:15

krishnaacharyaa

26.1k9 gold badges102 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Tailwind not working when using variables (React.js)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related