Tailwind CSS条件样式失效求助：自定义/默认边框颜色均不显示

我尝试用Tailwind CSS给React组件设置样式，需求是：传入color属性时使用自定义边框颜色，未传入时使用默认的primary边框颜色，但目前两种场景下边框颜色都不显示。

组件代码：

export default function UIStepBlurp({ ico, number, description, color }) {

    let styleCustomColor = `items-center justify-center pt-2 border-2 rounded-full text-[14px] flex absolute -left-4 bg-white -top-4 h-[33px] w-[33px] border-[${color}]`;
    let styleDefaultColor = "items-center justify-center pt-2 border-2 rounded-full text-[14px] flex absolute -left-4 bg-white -top-4 h-[33px] w-[33px] border-primary";

    return (
        <div className="flex relative w-[175px] h-[180px] shadow-lg bg-white rounded-xl px-[4px] flex-col items-center justify-start pt-[20px]" >
            <div className={`${color ? styleCustomColor : styleDefaultColor}`}>{number}</div> {/* 这里是条件判断 */}
            <div className="w-20 h-20 mb-[10px] bg-no-repeat bg-contain" style={{ backgroundImage: `url(${ico})` }} />
            <div className="text-[16px] leading-tight text-center mx-[10px] font-bold">{description}</div>
        </div>
    )
} 

调用组件代码：

<UIStepBlurp number={1} ico="image" description="进入课程目录。" color="#000" />

问题根源 #

1. 动态Tailwind类名不被识别：Tailwind CSS通过静态扫描代码中的类名生成样式，用模板字符串拼接的border-[${color}]属于动态类名，编译时会被忽略，导致自定义颜色不生效。
2. border-primary未配置：如果tailwind.config.js中没定义primary主题色，border-primary类不会生成对应样式，默认场景也失效。

修复步骤 #

1. 拆分静态类与动态样式：把公共Tailwind类抽离，动态颜色用React的style属性设置，规避动态类名问题。
2. 配置primary颜色：在Tailwind配置文件中定义primary色，或直接使用Tailwind内置颜色类（如border-blue-500）。

修改后的组件代码 #

export default function UIStepBlurp({ ico, number, description, color }) {
    // 抽离公共Tailwind类，避免代码重复
    const baseClass = "items-center justify-center pt-2 border-2 rounded-full text-[14px] flex absolute -left-4 bg-white -top-4 h-[33px] w-[33px]";

    return (
        <div className="flex relative w-[175px] h-[180px] shadow-lg bg-white rounded-xl px-[4px] flex-col items-center justify-start pt-[20px]">
            <div 
                className={`${baseClass} ${color ? '' : 'border-primary'}`}
                // 传入color时，通过style设置边框颜色
                style={color ? { borderColor: color } : {}}
            >
                {number}
            </div>
            <div className="w-20 h-20 mb-[10px] bg-no-repeat bg-contain" style={{ backgroundImage: `url(${ico})` }} />
            <div className="text-[16px] leading-tight text-center mx-[10px] font-bold">{description}</div>
        </div>
    )
}

配置primary颜色示例（可选） #

如果要使用border-primary，需在tailwind.config.js中添加主题色配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: '#你的主色调', // 替换为实际颜色值
      },
    },
  },
  plugins: [],
}

内容的提问来源于stack exchange，提问作者YCrhis