React中Tailwind CSS动态拼接w-[x%]类样式不生效

Tailwind CSS 是构建时静态扫描生成样式的框架：它会在项目打包阶段遍历所有源码文件，匹配识别到的完整类名，再生成对应的CSS规则。你通过字符串动态拼接生成的w-[${widthOfBlock}%]属于运行时才会确定的内容，Tailwind在构建扫描阶段拿不到变量的实际值，识别不出完整的类名，自然不会生成对应的宽度样式规则。
你在浏览器元素面板看到DOM上挂载了类名，只是说明React把拼接后的字符串塞到了class属性里，打开DevTools的「样式」面板搜索对应类名的CSS规则，会发现根本不存在这条规则，宽度自然不会生效。

最适配动态宽度场景的方案是直接用内联样式绑定计算值，不需要硬凑Tailwind类名：

const QuizComponent: React.FC<QuizProps> = (props) => {
  const items = props.flashcard?.items;
  // 增加空值兜底，避免items不存在时读取length报错
  const widthOfBlock = items?.length ? 100 / items.length : 0;
  const arrayOfProgressBlocks = [];

  for (let i = 0; i <= actualIndex; i++) {
    arrayOfProgressBlocks.push(
      <div 
        key={i} 
        className="border-2 border-blue-500" 
        style={{ width: `${widthOfBlock}%` }}
      />
    );
  }

  return (
    <div className="h-screen w-full grid place-items-center">
      <div className="w-screen place-self-end flex gap-2">
        {arrayOfProgressBlocks}
      </div>
    </div>
  );
};

export default QuizComponent;

如果一定要用Tailwind类实现，有两种可选方式，但都不如内联样式适合当前场景：

• 在tailwind.config.js的safelist配置里把所有可能出现的宽度类全量列出来，强制Tailwind提前生成这些类的样式。但你的宽度是根据题目数组长度动态计算的，可能出现33.333%、25%、20%、16.666%等无数种值，枚举成本极高，还会产生冗余CSS。
• 把所有可能用到的完整类名以静态字符串的形式写在源码里（比如存在一个映射对象中），让Tailwind扫描的时候能识别到，本质和safelist逻辑一致，同样不适合动态值范围不确定的场景。

注意：Tailwind 官方明确不推荐动态拼接类名的写法，所有用到的Tailwind类必须以完整的静态字符串形式出现在源码中，否则不会被识别生成样式。

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