必须在tailwind.config.js的theme.extend.keyframes下定义keyframes，并与theme.extend.animation配对注册，二者动画名须完全一致；keyframes帧键须用引号（如'0%'）、属性值须为字符串（如transform: 'translateX(-100%)'），animation值须为完整声明（如'fade-in 0.4s ease-out forwards'），缺一则animate-类不生成。
必须在 tailwind.config.js 的 theme.extend.keyframes 下定义，且必须与 theme.extend.animation 配对注册，否则 animate-xxx 类根本不会生成 CSS 规则。
keyframes 必须写在 theme.extend.keyframes 里
Tailwind 只识别这个固定路径。写错位置（比如直接塞进 theme.keyframes 或顶层对象）会被完全忽略。
-
theme.extend.keyframes的值必须是对象，键名用引号包裹，如'fade-in'、'slide-from-left' - 每个动画内部的帧键必须是字符串：
'0%'、'100%'或'from'、'to'；不能写0%（无引号）或0（数字） - 帧内属性名必须是标准 CSS 可动画属性，且值必须是字符串：
transform: 'translateX(-100%)'✅，translateX: '-100%'❌（Tailwind 不识别独立translateX） -
opacity: 0.3❌（数字），必须写成opacity: '0.3'✅
animation 配置必须显式绑定完整声明
theme.extend.animation 不是“起个别名”，而是把整条 animation CSS 声明原样注入类中。漏掉任意部分，animate-xxx 就无效。
- 键名（如
'fade-in'）必须和keyframes中完全一致，大小写、连字符都不能差 - 值必须是字符串，格式为：
'fade-in 0.4s ease-out forwards'—— 时长单位只能是s或ms，不能省略缓动函数（ease-in-out等） -
forwards很关键：没有它，动画播完会立刻回退到初始态（比如 opacity 从 0 → 1 后又跳回 0，看起来像“闪一下”） - 要支持
duration-300这类变体，时长不能写死：'spin-slow var(--tw-animation-duration, 1s) linear infinite'✅，'spin-slow 2s linear infinite'❌（duration-300无效）
HTML 元素得配合初始状态才能正常触发
动画不是覆盖一切的魔法，它依赖元素当前样式与关键帧首帧匹配。否则第一帧就跳变或不动。
- 如果动画从
opacity: '0'开始，元素本身就不能带opacity-0或hidden—— 否则动画被更高优先级的 class 压住，压根不启动 - 更稳妥的做法是：移除初始隐藏类，靠动画自己控制起始态；或用
opacity-0 animate-fade-in，但确保forwards生效 - 对加载类场景（如骨架屏），建议配合
IntersectionObserver，等元素进入视口再加animate-xxx，避免页面一加载就全播
常见静默失败点：Tailwind 不报错，只跳过非法项
配置写错不会抛异常，只是最终生成的 CSS 里压根没有对应规则。调试时最容易卡在这里。
- 检查
npx tailwindcss -o ./dist/tailwind.css --minify输出的 CSS 文件，搜索@keyframes fade-in或.animate-fade-in是否存在 - 确认浏览器 DevTools 的 “Animations” 面板里有没有该动画条目；没有，基本就是配置没生效
- SVG 路径动画需额外注意：
stroke-dasharray和stroke-dashoffset必须手动设好初始值，否则动画卡在起点 - 背景渐变动画无法直接驱动
background-image，得用background-position+ Arbitrary Values 模拟流动效果
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
