React组件中动态Tailwind宽度类无法稳定生效问题排查

核心原因 #

你使用的transition-width并不是Tailwind的内置类，这个无效类名引发了样式解析异常，间接导致宽度类无法正常生效。

解决步骤 #

1. 替换无效过渡类
   Tailwind默认没有transition-width这个类，要实现宽度过渡有两种可行方式：

   • 直接使用JIT模式的自定义过渡类：transition-[width]
   • 或者在tailwind.config.js中扩展过渡属性，之后就能正常使用transition-width类：

     module.exports = {
       content: ['./app/**/*.{js,jsx,ts,tsx}'],
       theme: {
         extend: {
           transitionProperty: {
             'width': 'width',
           },
         },
       },
       safelist: ['w-0', 'w-1/4', 'w-2/4', 'w-3/4', 'w-full'],
       // ...其他配置
     }
     

2. 验证效果
   替换过渡类后，动态传入的w-2/4、w-3/4即可正常生效——你已经在safelist中添加了这些类，Tailwind会确保它们被编译输出。

关于“突然失效”的推测 #

你提到最初功能正常、后来突然失效，大概率是后续新增了transition-width这个无效类导致的。之前没有该类时，宽度类样式能正常被应用；添加这个不存在的类后，浏览器解析样式时出现异常，间接阻断了宽度类规则的正常生效。

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