reactjstailwind-cssreact-propsternaryclassname

When the project starts, it does not load some tailwind class names from a ternary operator (react)

When I start my project it does not load certain tailwind classnames when this classname comes from a react property, I attached a video showing the error, I want to know how to make it load the color even with the ternary operator in the classname

A video showing my problem https://youtu.be/RcLbC5kA_fQ

The call component

<CardCampanha 
                    isPrivate={true}
                    age={"+18"}
                    title={"Nome da campanha"}
                    slots={"9/10"}
                    active={'#0FF0A0'}
                    genders={[
                                {title: "Fantasia", color: "#817EEF"}, 
                                {title: "Oneshot", color: "#EFAE7E"},
                                {title: "Gay", color: "#EF7EE4"}
                            ]}
                        imgURL={"/imagemcampanha/campanha.jpg"}
                />

The component

export default function CardCampanha({active, title, slots, genders, age, isPrivate, notActive, imgURL}){

        console.log(genders)
    
    genders.map(gender => {
        console.log(gender)
    })

    return(
        <div className='h-[26.01vh] w-[37.96vh] bg-white rounded-[1vh]'>
            <div className='h-[16.4815vh] w-[37.963vh] bg-black rounded-[1vh] rounded-b-none'>
                <div className='w-[3.5185vh] h-[3.4259vh] bg-black absolute flex items-center justify-center  rounded-[0.9259vh] mt-[1.5vh] ml-[2.5vh] z-10'>
                    <p className='font-nonito text-[1.8519vh] text-white'>{age}</p>
                </div>
                    <div className={`w-[2.037vh] h-[2.037vh] bg-[${active}] absolute flex items-center justify-center rounded-full mt-[1.5vh] ml-[34vh] z-10`}>
                </div>
                
                <div className=" w-full h-full flex items-center justify-center bg-[#C6C6C6] rounded-t-[1vh]">

                    {imgURL ? 
                            <img className={`h-full w-full ${notActive ? "saturate-0 z-10" : ""} object-cover rounded-t-[1vh] z-0`} src={imgURL} alt="" />
                        :
                            
                            <svg width="91" height="91" viewBox="0 0 91 91" fill="none" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
                                <rect x="0.40625" y="0.322754" width="90.2732" height="90.2732" fill="url(#pattern0)"/>
                                <defs>
                                <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
                                <use href="#image0_783_145" transform="scale(0.0078125)"/>
                                </pattern>
                                <image id="image0_783_145" width="128" height="128" href="data:image/png;base64,mybase64"/>
                                </defs>
                            </svg> 

                    }

                    
                </div>
            </div>

            <div className=' flex flex-col'>
                <div className='h-1/2 flex justify-between pl-[2.9vh] pr-[2vh] pt-[1.7vh] '>
                    <div className='h-full flex items-center justify-center gap-[0.5vh] '>
                        {isPrivate &&
                            <div className='w-[1.8vh] pb-[0.4vh]'>
                                <img src="/icons/cadeado.ico" alt="" />
                            </div>
                        }
                        <p className='font-nonito text-[1.8519vh] truncate w-[23vh]'>{title}</p>
                    </div>

                    <div className='h-full flex items-center justify-centers gap-[0.5vh] '>
                        <div className='w-[2.2vh] pb-[0.2vh]'>
                            <img src="/icons/pessoas.png" alt="" />
                        </div>
                        <p className='font-nonito text-[1.8519vh] '>{slots}</p>
                    </div>
                </div>
                <div className='h-1/2 flex pl-[2.5vh] pt-[1vh] gap-[0.5vh]'>
                    {
                        genders.map(gender => (
                            <div className={`bg-[${gender.color}]  rounded-r-[1.8519vh] rounded-l-[1.8519vh] px-[1.5vh] py-[0.2vh] flex items-center justify-center`}>
                                <p className='font-inter text-[1.2037vh] text-white'>{gender.title}</p>
                            </div>
                        ))
                    }
                </div>
            </div>
        </div>
    )
}
Solution

  • As per the documentation:

    The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.

    If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS:

    Don’t construct class names dynamically

    <div class="text-{{ error ? 'red' : 'green' }}-600"></div>

    In the example above, the strings text-red-600 and text-green-600 do not exist, so Tailwind will not generate those classes. Instead, make sure any class names you’re using exist in full:

    Always use complete class names

    <div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

    You could consider: