Tailwind CSS自定义Keyframes动画失效的根本原因是配置位置错误或语法不合法：必须严格置于theme.extend.keyframes下，键名须为字符串（如'fade-in'），帧值须用标准CSS属性字符串（如transform: 'translateX(-100%)'），且需在theme.extend.animation中以完全匹配的字符串名显式声明完整动画规则（如'fade-in': 'fade-in 300ms ease-out forwards'）。
theme.extend.keyframes 配置位置错误或语法不合法，动画规则根本不会被 Tailwind 解析，也就不会生成任何 @keyframes 或 animate-* 类——不是报错，是静默跳过。
keyframes 必须严格写在 theme.extend.keyframes 下
Tailwind 只认这个路径。写在 theme.keyframes、顶层对象里、插件配置中，全都不生效。
常见误写：
-
theme: { keyframes: { ... } }❌（应为extend.keyframes） -
plugins: [require('tailwindcss-animate')]里塞 keyframes ❌（插件不接管你的自定义帧） - 把
@keyframes直接写进.css文件 ❌（Tailwind 不扫描外部 CSS）
keyframes 值必须是合法 CSS 属性字符串
Tailwind 不做运行时校验，非法项会被静默忽略。比如：
-
'0%': { translateX: '-100%' }❌（translateX不是标准 CSS 属性，要用transform: 'translateX(-100%)'） -
'from': { opacity: 0.3 }❌（值必须是字符串：opacity: '0.3'） -
[myAnim]或0当键名 ❌（必须是字符串：'fade-in'）
animation 必须显式绑定完整声明字符串
theme.extend.animation 里的值不是动画名，而是最终写进 animation CSS 属性的完整字符串：
-
'fade-in': 'fade-in 300ms ease-out forwards'✅（含名称、时长、缓动、填充模式） -
'fade-in': 'fade-in'❌（缺时长和缓动，浏览器用默认值但行为不可控） -
'fade-in': 'fade-in 0.3s'❌（单位缺失，0.3s被忽略，实际等效于fade-in） - 大小写/连字符不一致：
keyframes里是'slideIn'，animation里写'slide-in'❌（必须完全一致）
生成后没验证输出 CSS 就调试，等于盲调
改完配置别急着刷新页面。先跑一次构建，检查输出文件是否真含对应规则：
立即学习“前端免费学习笔记（深入）”；
- 执行：
npx tailwindcss -o ./dist/tailwind.css --minify - 打开
./dist/tailwind.css，搜索@keyframes fade-in和animate-fade-in - 搜不到 → 配置没被读取或路径错；搜到了但不动 → 查 HTML 元素是否带初始冲突样式（如
opacity-0卡住起点）
另外注意：Tailwind 4.0.9 开启 prefix 后，自定义关键帧会静默失效——这是已知 bug，目前只能禁用前缀或降级。
