CODEWITHSUNDEEP
reactjstailwind-cssclassname
Esa Kurniawan
Esa Kurniawan

Reputation: 647

How to pass a Tailwind CSS color class to a child element

I've been trying to do something like this:

    const Children = ({ className }) => {
        return (
            <div className={`text-blue-400 font-sans ${className}`}>Hello world</div>
        );
    };

    const Parent = () => {
        return (
            <div>
                <Children className='text-red-400' />
            </div>
         )
    }

However, the color of the text in the Children component is not changing to red, but rather stays blue.

Expected result: the text in Children is red

the actual result: the text in Children remains blue

Upvotes: 1

Views: 2699

Answers (1)

Konrad
Konrad

Reputation: 24681

const variants = {
  red: 'text-red-400',
  blue: 'text-blue-400'
}

const Children = ({ variant = 'blue' }) => {
    return (
        <div className={`font-sans ${variants[variant]}`}>Hello world</div>
    );
};

const Parent = () => {
    return (
        <div>
            <Children variant='red' />
        </div>
     )
}

Upvotes: 2

Related Questions