React与Tailwind中classNames动态宽度类无效的技术疑问

Tailwind CSS 采用JIT（即时编译）模式时，会在构建阶段通过PostCSS静态扫描所有代码文件，识别出符合Tailwind语法的静态类名，只对这些类生成对应的CSS样式。

你用模板字符串动态拼接的w-[${obj.key1}px]，在构建阶段PostCSS只能看到未解析的模板字符串本身，无法预知运行时才会确定的540数值，因此这个类名不会被Tailwind编译成有效的CSS规则，自然无法生效。

classNames库仅负责在运行时将类名拼接为最终字符串，完全不参与Tailwind的静态扫描过程，所以不管是否使用classNames，动态生成的非静态可识别类名，Tailwind都不会处理。

• 直接使用内联样式：如果宽度是完全动态的，这是最简单的方案：

  <div className="some css properties" style={{ width: `${obj.key1}px` }}>...</div>
  

• 预定义可能的类名（适用于数值范围有限的场景）：把所有可能出现的宽度类静态写出来，通过classNames匹配选择：

  const obj = { key1: 540 };
  <div className={classNames("some css properties", {
    'w-[540px]': obj.key1 === 540,
    'w-[480px]': obj.key1 === 480
  })}>...</div>
  

• 结合CSS变量自定义工具类（适用于需要复用动态宽度逻辑的场景）：
  1. 在tailwind.config.js中扩展主题，定义一个使用CSS变量的宽度类：

     module.exports = {
       theme: {
         extend: {
           width: {
             'dynamic': 'var(--dynamic-width)'
           }
         }
       }
     }
     

  2. 在组件中通过内联样式设置CSS变量的值：

     <div 
       className="some css properties w-dynamic"
       style={{ '--dynamic-width': `${obj.key1}px` }}
     >...</div>
     

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