React结合TailwindCSS时scale类状态切换偶发失效问题

我用React和TailwindCSS开发新闻Web应用，头条区域的图片需要通过React状态isMouseIn控制scale类，实现鼠标悬停时的缩放效果。但这个功能存在偶发失效问题：首次进入页面时缩放不生效，刷新页面或手动修改代码中的scale值后恢复正常，而状态值isMouseIn的更新完全正常。

相关实现代码：

export default function Headline() {
  /*
   *
   *  green border --> the whole component
   *  orange border --> div that is darkening the whole component
   */

  const [isMouseIn, setMousePos] = useState(false);
  function mouseEnter() {
    setMousePos(true);
  }
  function mouseLeave() {
    setMousePos(false);
  }

  return (
    <div
      onMouseEnter={() => mouseEnter()}
      onMouseLeave={() => mouseLeave()}
      className="mb-[.1em] overflow-hidden 950:rounded-xl cursor-pointer w-[100%] h-[300px] 380:h-[400px] 1215:h-[500px]  max-h-[500px] relative shadow-2xl"
    >
      <img
        src={headline}
        className={`w-full scale-${
          isMouseIn ? "150" : "100"
        } object-cover transition-all duration-700 h-full max-h-full absolute`}
      />
...

这不是React的Bug，是你用了Tailwind不推荐的动态类名拼接方式导致的。

Tailwind的JIT编译器会在构建时扫描代码里的完整类名，然后生成对应的CSS。你用scale-${isMouseIn ? "150" : "100"}这种动态拼接的方式，编译器无法识别出scale-150和scale-100这两个完整类名，所以首次构建时不会生成它们的CSS规则，导致首次加载时缩放失效。而刷新页面或修改代码时，编译器重新扫描才会识别到这些类，生成对应的样式，功能就恢复正常了。

有两种修复方式：

方式一：直接写完整类名，用条件判断切换 #

把动态拼接改成直接判断完整类名，让Tailwind能提前识别：

<img
  src={headline}
  className={`w-full ${isMouseIn ? 'scale-150' : 'scale-100'} object-cover transition-all duration-700 h-full max-h-full absolute`}
/>

方式二：用Tailwind原生hover伪类（更推荐） #

完全不需要React状态，直接用Tailwind的hover:伪类实现悬停效果，更简洁也更符合Tailwind的设计思路：

<img
  src={headline}
  className="w-full scale-100 hover:scale-150 object-cover transition-all duration-700 h-full max-h-full absolute"
/>

这种方式不仅能彻底解决偶发失效问题，还省去了手动管理鼠标事件和状态的代码，性能也更好。

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