动态变量设置ml值仅10/100%生效，固定值正常的技术咨询

问题原因 #

这是因为Tailwind CSS采用按需生成样式的机制：它会在构建阶段扫描代码中的静态类名，仅为这些类生成对应的CSS规则。你通过模板字符串动态拼接的ml-[${dummy}%]属于动态类名，Tailwind无法在构建时预知所有可能的dummy取值，因此除了刚好被扫描到的10%、100%（可能项目其他地方用过这类静态值，或是Tailwind默认包含相关规则），其他数值对应的类不会被生成，自然无法生效。而写死的ml-[13%]是静态类，会被Tailwind识别并生成对应样式。

解决办法 #

• 方法一：使用内联样式（最直接）
  绕开Tailwind的类生成限制，直接通过style属性设置margin-left：

  const dummy = 13;
  
  <div className='relative w-[86%] h-1 rounded-xl'>
      <div style={{ marginLeft: `${dummy}%` }} className='absolute h-3 max-w-[0.18rem]'></div>
  </div>
  

• 方法二：配置Tailwind安全列表
  如果必须使用Tailwind类，可以在tailwind.config.js中添加安全列表，让Tailwind提前生成所有可能的百分比类。假设dummy是0-100的整数，配置如下：

  module.exports = {
    safelist: [
      {
        pattern: /ml-\[\d+%\]/, // 匹配所有数字百分比的margin-left类
      },
    ],
    // 其他配置项...
  }
  

  这样Tailwind会预先生成所有符合该正则的类，无需依赖静态扫描。

• 方法三：静态列出所有可能值（适合取值范围小的场景）
  如果dummy的可能取值不多，可以在代码中静态列出这些类（无需实际渲染），让Tailwind扫描到：

  // 放在组件任意位置，仅用于让Tailwind识别类名
  <div className='ml-[13%] ml-[25%] ml-[50%]'></div>
  
  // 原有业务代码
  const dummy = 13;
  <div className='relative w-[86%] h-1 rounded-xl'>
      <div className={`ml-[${dummy}%] absolute h-3 max-w-[0.18rem]`}></div>
  </div>
  

内容的提问来源于stack exchange，提问作者Çınar Arslan