必须在theme.extend.keyframes和theme.extend.animation中配对注册自定义动画，keyframes定义帧逻辑，animation绑定完整声明（含时长、缓动、forwards），缺一则animate-类不生成；百分比须加引号，属性值须为字符串，支持duration等变体需用CSS变量。
自定义动画在 Tailwind 里能用，但不是“写完 keyframes 就自动有 class”——theme.extend.keyframes 和 theme.extend.animation 必须配对注册，漏一个，animate-xxx 类就完全不生成 CSS 规则。
tailwind.config.js 里 keyframes 怎么写才合法
必须放在 theme.extend.keyframes 下，键是动画名（如 'slide-in'），值是对象，每个帧用带引号的百分比字符串作键（'0%'、'100%' 或 'from'、'to'），不能用数字或不加引号。
属性名必须是标准 CSS 可动画属性，且值必须是字符串：
-
'0%': { transform: 'translateX(-100%)' }✅ 正确 -
'0%': { translateX: '-100%' }❌ 静默忽略，Tailwind 不识别独立translateX -
'0%': { opacity: 0.3 }❌ 值不是字符串，会被跳过 -
'0%': { opacity: '0.3' }✅ 正确
animation 工具类为什么加了也不动
常见原因不是代码写错，而是配置没对齐。你得同时做两件事：
- 在
theme.extend.keyframes里定义好帧逻辑（比如'spin-slow'） - 在
theme.extend.animation里绑定工具类名（比如spin-slow），值必须是完整声明：'spin-slow 0.8s ease-in-out forwards'
缺一不可。浏览器控制台不会报错，只是最终 CSS 里压根没有 .animate-spin-slow 这个类。
特别注意：forwards 很容易被漏掉。没它，动画播完立刻回退到初始状态——比如 opacity 从 0 → 1，播完又变回 0，看起来像“闪一下”。
怎么让自定义动画支持 duration-300、delay-75 这类变体
Tailwind 的 duration-*、delay-* 是通过 CSS 变量覆盖 animation-duration 和 animation-delay 实现的。你的自定义动画要兼容，就不能把时长写死：
- ❌ 错误：
spin-slow: 'spin-slow 2s linear infinite' - ✅ 正确：
spin-slow: 'spin-slow var(--tw-animation-duration, 1s) linear infinite'
这样加 class="animate-spin-slow duration-300" 才会真正变成 300ms。否则 duration-300 没任何效果。
SVG 路径动画为什么总卡在起点
SVG <path></path> 动画依赖 stroke-dasharray 和 stroke-dashoffset，而 Tailwind 不内置路径动画类。你得手动注册关键帧，并确保三者一致：
-
tailwind.config.js中theme.extend.animation注册类名，如animate-svg-path-start: 'svg-path-dash 0.4s ease-out forwards' - CSS 文件中（如
src/tailwind.css）定义@keyframes svg-path-dash，名字必须完全一致 - 每个
<path></path>需单独设stroke-dasharray和初始stroke-dashoffset，否则动画起始位置错乱
更麻烦的是：如果用 group-data-[checked]:animate-svg-path-start 控制勾选状态，所有路径必须在同一 <g class="group"></g> 下，且 data-checked 要靠 JS 同步更新——不然状态切换时动画不会触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
