如果我把颜色直接放在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类中用变量改变颜色，但是不起作用。