React中Tailwind CSS的transition属性不生效问题求助

你的问题出在动态拼接Tailwind类名的方式上。Tailwind CSS是通过静态扫描代码中的类名来生成对应CSS的，像opacity-${showCart ? "100" : "0"}这种动态拼接的类名，Tailwind在构建时识别不出来，所以不会生成opacity-100和opacity-0的样式，自然就没有过渡效果。

解决方法很简单，直接把完整的类名写在条件判断里：

<div id="cart" className={`relative transition-opacity duration-500 ${showCart ? 'opacity-100' : 'opacity-0'}`}>

如果项目里类名条件判断比较多，也可以用clsx库来简化写法（需要先安装）：

import clsx from 'clsx';

// 组件内使用
<div id="cart" className={clsx(
  'relative transition-opacity duration-500',
  { 'opacity-100': showCart },
  { 'opacity-0': !showCart }
)}>

这样Tailwind就能正确识别到所有需要的类名，生成对应的样式，透明度过渡效果就会正常生效了。

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