自定义CSS动画导致Tailwind hover样式失效问题求助

你的intro-x动画使用了forwards属性，会强制元素一直保持动画最后一帧的opacity:1状态。而CSS动画的优先级高于伪类（:hover）样式，导致hover:opacity-70被完全覆盖，无法生效。

方案一：提升hover样式优先级（快速解决） #

给Tailwind的hover类添加!important来覆盖动画的优先级，写法如下：

<button className="intro-x bg-slate-900 text-white hover:opacity-70!">Click here!</button>

或者在自定义CSS中专门声明：

.intro-x:hover {
  opacity: 0.7 !important;
}

⚠️ 注意：!important尽量少用，仅作为临时应急方案。

方案二：调整动画逻辑（推荐） #

修改自定义CSS，让基础样式控制最终的opacity值，动画只负责过渡过程，避免强制锁定opacity：

.intro-x {
  opacity: 1; /* 基础样式设为最终的opacity值 */
  transform: translateX(0);
  animation: intro-x 1s ease forwards;
}

@keyframes intro-x {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    transform: translateX(0);
    /* 移除这里的opacity声明，让基础样式的opacity生效 */
  }
}

动画结束后，元素的opacity由基础样式控制，此时:hover的样式就能正常覆盖它。

方案三：改用Tailwind原生动画系统（可选） #

如果不想写自定义CSS，可以把动画注册到Tailwind配置中，配合过渡逻辑使用：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      keyframes: {
        'intro-x': {
          'from': { opacity: '0', transform: 'translateX(100px)' },
          'to': { transform: 'translateX(0)' },
        },
      },
      animation: {
        'intro-x': 'intro-x 1s ease forwards',
      },
    },
  },
}

然后直接用Tailwind类调用：

<button className="animate-intro-x bg-slate-900 text-white hover:opacity-70">Click here!</button>

内容的提问来源于stack exchange，提问作者Josué Mendonça