tailwind css自定义keyframes动画不生效的核心原因是配置路径错误或绑定不完整：必须严格置于theme.extend.keyframes，且需在theme.extend.animation中以完全匹配的字符串名显式声明完整动画规则（如'fade-in': 'fade-in 300ms ease-out forwards'），同时避免初始样式冲突、确保生成文件含对应@keyframes。
tailwind.config.js 里 keyframes 写错位置
Tailwind 只认 theme.extend.keyframes 这个路径，写在 theme.keyframes、顶层 keyframes、插件对象里，全都不生效——不是报错，是压根不生成 @keyframes 规则，开发者工具里搜不到对应动画名。
常见错误：
- 把
keyframes直接写进.css文件，指望 Tailwind 自动扫描——它不解析外部 CSS - 用变量或数字当键名，比如
[myAnim]或0，必须是字符串'fade-in' - 帧定义里用了非标准 CSS 属性，比如
translateX: '-100%'（应写transform: 'translateX(-100%)'）
animation 和 keyframes 名字没对上
theme.extend.animation 和 theme.extend.keyframes 里的动画名必须完全一致，包括大小写、短横线。比如 keyframes 里是 'slide-in'，animation 里就不能写成 slideIn 或 'slide_in'。
更关键的是：光写 keyframes 不会自动生成 animate-slide-in 类，必须在 animation 里显式绑定，格式是完整声明字符串：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- ✅
'slide-in': 'slide-in 300ms ease-out forwards' - ❌
'slide-in': 'slide-in'（缺时长和缓动） - ❌
'slide-in': 'slide-in 300 ease-out'（单位缺失，300被忽略）
动画类生效但没效果
其实是起始态被其他 class 覆盖了。比如你写了 fade-in 让 opacity 从 '0' 到 '1'，但元素本身带 opacity-0 或 hidden，动画第一帧就卡住——因为其他 class 已经把 opacity: 0 写死了，keyframes 的 '0%': { opacity: '0' } 根本没机会触发。
- 移除初始
opacity-0，靠动画自己控制起始态 - 确保
animation值里含forwards，否则动画播完会回退 - 用
IntersectionObserver延迟加animate-xxx类，避免页面一加载就全播
改完配置后没验证生成结果
最常被跳过的一步：运行 npx tailwindcss -o ./dist/tailwind.css --minify，然后打开输出文件搜索 @keyframes fade-in 或 animate-fade-in。搜不到，说明配置没被读取；搜到了但动画不动，再查 HTML 元素是否满足触发条件（尺寸、display、起始样式冲突）。
另外注意：Tailwind 4.0.9 版本开启 prefix 后，动画关键帧会静默失效——这是已知 bug，目前只能暂时禁用前缀或降级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
