自定义关键帧动画在 tailwind 中需同时配置 theme.extend.keyframes 和 theme.extend.animation，且命名、语法、位置均须严格合规，否则动画不生效且无报错。
自定义关键帧动画在 Tailwind 里不会自动生效，必须同时完成 theme.extend.keyframes 和 theme.extend.animation 两处配置，缺一不可——漏掉任一环节，animate-xxx 类根本不会生成 CSS 规则，浏览器控制台也完全不报错。
keyframes 配置必须合法且位置正确
所有自定义关键帧必须放在 theme.extend.keyframes 下，不能写在 theme.keyframes 或顶层对象里。Tailwind 只扫描这个路径，其他位置一律忽略。
- 百分比键必须加引号：
'0%'✅，0%或0❌ - 属性名必须是标准 CSS 可动画属性：
transform: 'rotate(0deg)'✅，rotate: '0deg'或rotateZ: '0deg'❌（Tailwind 不识别） - 属性值必须是字符串：
opacity: '0.2'✅，opacity: 0.2❌ - 支持
'from'/'to'，但不能和'50%'混用
animation 声明要完整且命名严格对齐
theme.extend.animation 的值不是 keyframes 名，而是完整的 CSS animation 属性字符串，它会原样注入到生成的 class 中。
- 动画名（如
'fade-in'）在keyframes和animation两个对象里必须完全一致：大小写、连字符、引号都不能差 - 必须显式写出时长单位：
'fade-in 0.4s ease-out forwards'✅，'fade-in 400ms'也行，但'fade-in 400'❌（无单位被忽略） -
forwards很关键：没有它，动画播完立刻回退到初始态（比如 opacity 从 0 → 1 → 0），看起来像“闪一下” - 要兼容
duration-300等变体，时长得用 CSS 变量：'fade-in var(--tw-animation-duration, 0.4s) ease-out forwards'
HTML 元素必须满足起始条件才能触发
动画不是“加了类就动”，它依赖元素当前样式与关键帧首帧匹配。不匹配就会跳变、卡住或静默失效。
- 如果关键帧第一帧是
'0%': { opacity: '0', transform: 'scale(0.8)' }，元素就得提前带opacity-0 scale-[0.8] - 避免用
hidden：它等价于display: none，会中断动画生命周期 - 空
div或纯文本加animate-spin看不到效果——旋转需要尺寸，得配w-6 h-6或类似 - 调试时打开 DevTools → Animations 面板，确认动画是否被注册、是否在播放、是否被其他样式覆盖
最容易被忽略的是：Tailwind 对非法 keyframes 条目完全静默跳过，不警告也不报错。每次改完配置，建议运行 npx tailwindcss -o ./dist/tailwind.css --minify，然后搜索输出文件里有没有对应 @keyframes fade-in —— 没有，说明配置没生效，而不是动画“没动”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
