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配置漏了或名字不一致
theme.extend.animation和theme.extend.keyframes里的动画名必须完全一致，包括大小写、短横线。比如keyframes里是'slide-in'，animation里就不能写成slideIn或'slide_in'。
更关键的是：光写keyframes不会自动生成animate-slide-in类，必须在animation里显式绑定，格式是完整声明字符串：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- ✅
'slide-in': 'slide-in 300ms ease-out forwards' - ❌
'slide-in': 'slide-in'（缺时长和缓动） - ❌
'slide-in': 'slide-in 300 ease-out'（单位缺失，300会被忽略）
动画类生效但没效果，其实是起始态被覆盖
比如你写了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实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
