项目启动时，不会从三元运算符（react）加载一些顺风类名

Question

当我启动我的项目时，当该类名来自反应属性时，它不会加载某些顺风类名，我附加了一个显示错误的视频，我想知道如何使其加载颜色，即使在类名中使用三元运算符

显示我的问题的视频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>
    )
}
                

Answer 1

根据文档：

Tailwind 如何提取类名的最重要含义是，它只会查找源文件中以完整不间断的字符串形式存在的类。

如果您使用字符串插值或将部分类名连接在一起，Tailwind 将找不到它们，因此不会生成相应的 CSS：

不要动态构造类名

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

在上面的示例中，字符串

text-red-600

和

text-green-600

不存在，因此 Tailwind 不会生成这些类。 相反，请确保您使用的任何类名完整存在：

始终使用完整的类名

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

您可以考虑：

• 在 prop 中使用完整的类名，例如：

  <CardCampanha … active="bg-[#0FF0A0]" />
  

  export default function CardCampanha({active, title, slots, genders, age, isPrivate, notActive, imgURL}){
    // …
    <div className={`… ${active} …`}>
  

• 使用

  style

  属性，例如：

  <CardCampanha … active="#0FF0A0" />
  

  export default function CardCampanha({active, title, slots, genders, age, isPrivate, notActive, imgURL}){
    // …
    <div … style={{ backgroundColor: active }}>