NextJS中自定义Tailwind Keyframes无法生效问题排查

1. 验证 tailwind.config.js 配置 #

首先确认你的配置文件语法和路径扫描范围是否正确。自定义动画的配置需要放在 theme.extend 下，且确保 content 数组包含所有使用 animate-wiggle 的文件路径：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./_app.tsx", // 显式包含_app文件，避免路径扫描遗漏
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        },
      },
      animation: {
        'wiggle': 'wiggle 1s ease-in-out infinite',
      },
    },
  },
  plugins: [],
}

如果 content 没覆盖到 _app.tsx，Tailwind 不会编译这个自定义类，导致样式缺失。

2. 检查组件类的应用与样式注入 #

打开浏览器开发者工具，查看应用了 animate-wiggle 的元素：

• 确认类名已正确添加到元素上
• 检查元素的 animation 属性是否存在 wiggle 1s ease-in-out infinite 这一行
  如果看不到该样式，说明配置未被正确编译，回到第一步修正 content 路径。

3. 清除缓存并重启服务 #

Next.js 的缓存可能导致新的 Tailwind 配置不生效，执行以下步骤：

• 终止当前开发服务器
• 删除项目根目录下的 .next 文件夹
• 重新运行 npm run dev 或 yarn dev

4. 排查样式冲突 #

如果元素上有其他 animation 相关的内联样式或优先级更高的 CSS，会覆盖自定义动画。在开发者工具的「样式」面板中查看 animation 属性的来源，确认没有被其他规则覆盖。

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