使用jQuery添加类后Tailwind CSS动画无法播放的问题

你遇到的问题核心是Tailwind CSS的JIT（即时编译）机制导致动态添加的自定义动画类未被编译。Tailwind默认会扫描content配置目录下的静态文件，仅编译实际出现的类。由于animate-fadeout只在JavaScript中动态添加，未在静态源码里出现，Tailwind会判定该类未被使用，不会生成对应的CSS规则，因此开发者工具中看不到这个类的样式。

另外需要注意：你定义的keyframes里opacity值不符合CSS规范——opacity的合法取值是0到1的小数，而非百分比数值，虽然浏览器会自动将100解析为1，但建议修正为规范写法避免潜在问题。

方案1：用safelist强制保留类 #

修改Tailwind配置文件，在theme同级添加safelist，将需要动态添加的类列入其中，强制Tailwind编译这些类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  // 新增safelist配置
  safelist: [
    'animate-fadeout',
    'animate-fadein'
  ],
  theme: {
    extend: {
      scale: {
        '65': '0.65',
      },
      animation: {
        fadeout: 'fadeOut 1s ease-in-out',
        fadein: 'fadeIn 1s ease-in-out',
      },
      keyframes: {
        fadeOut: {
          '0%': { opacity: 1 }, // 修正为小数
          '100%': { opacity: 0 },
        },
        fadeIn: {
          '0%': { opacity: 0 },
          '100%': { opacity: 1 }, // 修正为小数
        },
      },
    },
  },
  plugins: [],
}

方案2：静态HTML中添加占位类 #

如果不想使用safelist，可以在页面的隐藏元素中添加目标类，让Tailwind扫描到这些类并编译：

<!-- 隐藏的占位元素，仅用于触发Tailwind编译类 -->
<div class="hidden animate-fadeout animate-fadein"></div>

方案3：修正keyframes的opacity值 #

将keyframes中的opacity: 100统一改为opacity: 1，遵循CSS规范，避免不必要的解析异常。

修改配置后，重新构建CSS（比如执行npm run dev或项目对应的构建命令），再用JavaScript动态添加类，此时开发者工具中应能看到animate-fadeout的样式规则，动画即可正常生效。

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