必须在tailwind.config.js的theme.extend.keyframes中显式声明自定义关键帧，且须配对注册theme.extend.animation，二者名称严格一致；keyframes键须为带引号的百分比（如"0%"），属性值须为字符串，animation值须含完整声明（如"fade-in 0.4s ease-out forwards"）。
必须在 tailwind.config.js 的 theme.extend.keyframes 里显式声明，否则 Tailwind 根本不会生成对应 CSS 规则——它不扫描你的 CSS 文件，也不自动提取 @keyframes。
keyframes 配置必须写在 theme.extend 下
直接往配置顶层或插件里塞 keyframes 是无效的。Tailwind 只认 theme.extend.keyframes 这个路径。
- 键名（如
'fade-in'）必须是字符串，带单引号或双引号 - 值必须是对象，每个帧用带引号的百分比作键：
'0%'、'100%'或'from'、'to'，不能写成0或100 - 属性值必须是字符串：
opacity: '0'✅，opacity: 0❌；transform: 'scale(0.8)'✅，scale: '0.8'❌（Tailwind 不识别独立 transform 子属性）
animation 配置必须和 keyframes 名称严格配对
theme.extend.animation 里的动画名（如 'animate-fade-in'）必须和 keyframes 里定义的名称（'fade-in'）完全一致，包括大小写和连字符。
- 值是完整 CSS
animation声明字符串，例如：'fade-in 0.4s ease-out forwards' -
forwards很关键：没它，动画播完会回退到初始态，看起来像“闪一下” - 时长、缓动、填充模式都得写死在这里，不能靠 class 变体动态改
HTML 元素必须满足动画触发条件
配置没错，但动画不动？大概率是元素本身“不支持动画渲染”。
立即学习“前端免费学习笔记（深入）”；
- SVG 默认是
display: inline，没显式宽高时transform: rotate()不生效——加inline-block w-6 h-6就行 - 动画第一帧（
'0%'）的样式，必须和元素当前 CSS 状态一致，否则会跳变；比如'0%': { opacity: '0' }，那元素就得初始有opacity-0或内联style="opacity:0" - 用
stroke-dasharray做路径动画时，不能写死像素值，得用 CSS 变量（如var(--svg-path-length)），否则响应式下长度错位
最常被忽略的是：keyframes 和 animation 两个对象里的名字拼错一个字符，或者漏掉 forwards，结果就是控制台零报错、CSS 规则压根没生成、动画静默失效——得去浏览器开发者工具的 Styles 面板里查有没有对应 @keyframes 和 .animate-xxx 规则。
