如何用变量动态修改TailwindCSS属性？我的问题与解决尝试

问题描述 #

我在制作作品集时，定义了包含颜色值的技能对象数组：

export const skills = [
  {
    id: 1,
    name: "front-end",
    Icon: FaReact,
    color: "#61DAFB",
  },
];

遍历数组渲染SkillCard组件时，color变量能正常打印，但尝试用border-b-[${color}]这种动态拼接的Tailwind类名设置组件下边框颜色时完全无效，调整写法也没解决。

已实现的解决方案（1月23日更新） #

改用内联style设置边框属性后达到了预期效果，但不确定这是否为最佳实践，代码如下：

const SkillCard = ({ skill }) => {
  const { name, Icon, tools, color } = skill;
  const style = { color };

  return (
    <article
      style={{
        borderBottomStyle: "solid",
        borderBottomColor: color,
        borderBottomWidth: "8px",
      }}
      className="bg-black text-gray-400 hover:text-white w-full hover:shadow-lg hover:shadow-gray-800 flex flex-col gap-4 p-8 rounded-lg grayscale hover:grayscale-0 duration-200"
    >
      <Icon style={style} size={50} />
      <h1 className="font-bold text-xl capitalize">{name}</h1>
      <p>{tools}</p>
    </article>
  );
};

问题原因与补充方案 #

为什么border-b-[${color}]无效？ #

Tailwind CSS是构建时扫描类名生成样式的，动态拼接的类名（比如border-b-[${color}]）无法在构建阶段被识别到具体值，所以不会生成对应的CSS规则，自然无法生效。

内联style是否为最佳实践？ #

在这种颜色值完全动态（从外部配置/接口传入、无法提前预知）的场景下，内联style是完全合理的方案——它直接作用于元素，不依赖Tailwind的构建扫描逻辑，能精准满足动态样式需求。

其他可选方案 #

如果想继续使用Tailwind语法，还有两种思路：

1. 提前预定义所有可能的颜色到配置文件
   把用到的颜色都加到tailwind.config.js的主题扩展中：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        react: '#61DAFB',
        // 其他技能对应的颜色
      },
    },
  },
};

之后在组件里直接用border-b-react这类预定义类名即可，前提是所有颜色都能提前确定。

2. 结合CSS变量使用Tailwind
   先给元素设置CSS变量，再用Tailwind的动态类名引用变量：

<article
  className="border-b-8 border-solid border-[--border-color]"
  style={{ '--border-color': color }}
  // 其他className和内容
>

这种方式既保留了Tailwind的语法风格，又支持动态颜色值，也是实用的选择。

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