Reactjs 当项目开始时，它不会从三元运算符(REACT)加载一些tailwind 类名称

当我开始我的项目它不加载某些tailwind 类名称时，这个类名来自一个react 属性，我附上了一个显示错误的视频，我想知道如何让它加载 colored颜色 ，即使在类名中使用三元运算符

一段展示我的问题的视频https://youtu.be/RcLbC5kA_fQ

呼叫组件

<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"}
                />

该组件

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>
    )
}