css 模板无法与React中的Tailwind配合使用

ee7vknir  于 2023-01-18  发布在  React
关注(0)|答案(1)|浏览(140)

如果我把颜色直接放在tailwind类中,比如"bg-cianTheme",它就可以工作。但是如果我使用javascript模板,比如"bg-${primaryColorTheme}",上面的代码就不工作了。为什么会发生这种情况,如何修复?
代码:

import { BsGithub, BsLinkedin } from 'react-icons/bs'
export interface INewProfileCardProps {
    photo: string
    github: string
    linkedin: string
    colors: string[]
    primaryColorTheme: string // tailwind refence collor
    secondaryColorTheme: String //tailwind reference collor
    terciaryColorTheme: string //tailwind reference collor
    labelName: string
}

export function NewProfileCard({
    photo,
    github,
    linkedin,
    colors,
    labelName,
}: INewProfileCardProps) {
    const [primaryColorTheme, secondaryColorTheme, terciaryColorTheme] = colors    
    console.log(`bg-${primaryColorTheme}`)
    return (
        <div className="flex items-center justify-center">
            <div>{/* <p className="text-[250px]">{'<'}</p> */}</div>
            <div className=" relative h-[202px] w-[404px] rounded-xl bg-whiteIcon px-4 py-8 pt-2">
                <div
                    className={`bg-${primaryColorTheme} relative  flex h-full w-full`}
                >
                    <img
                        className="absolute bottom-0"
                        src={photo}
                        alt="personal-photo"
                    ></img>
                </div>
                <div className="absolute flex">
                    <div
                        className={`flex items-center justify-center font-bold text-${primaryColorTheme} bg-${primaryColorTheme} rounded-l-xl px-6 py-2`}
                    >
                        <BsGithub className="text-2xl" />
                        <p className="ml-3 text-lg">Git Hub</p>
                    </div>
                    <div
                        className={` bg-${secondaryColorTheme} ${primaryColorTheme} flex items-center justify-center rounded-r-xl px-6 py-2 font-bold`}
                    >
                        <BsLinkedin className="text-2xl" />
                        <p className="ml-3 text-lg">Linkedin</p>
                    </div>
                </div>
            </div>
            <div>
                {/* <p className="text-[250px]">
                    <span className={`text-${primaryColorTheme}`}>/</span>
                    {'>'}
                </p> */}
            </div>
        </div>
    )
}

我试着用模板在tailwind类中用变量改变颜色,但是不起作用。

hzbexzde

hzbexzde1#

问题是postcss找不到这样的类,你可以把它添加到tailwind.config.js中

safelist: ["bg-somecolor"]

或者你可以找到一种不使用插值的方法

相关问题