animate-spin 无法满足高度自定义需求，因其仅提供固定无限旋转，不支持方向、速度曲线、起止角度控制，也无法适配多状态流转（如 loading→success→error）及文字切换、颜色渐变等动态效果。
直接在按钮上加 animate-spin 或 animate-pulse 只能应付最基础场景；真要实现「高度自定义」的加载动画（比如带进度、带文字切换、带状态过渡），必须绕过默认工具类，用 theme.extend.keyframes + theme.extend.animation 配对注册，且 HTML 元素需手动控制初始态与动画衔接。
为什么 animate-spin 不能满足「高度自定义」需求
animate-spin 是预设的无限旋转动画，无法控制方向、速度曲线、起止角度，也不能配合 loading → success → error 的多状态流转。它只适合图标级微动效，一旦需要文字变化（如“提交中…”→“已成功”）、宽度收缩、颜色渐变或暂停/重置，就必须自己写关键帧。
tailwind.config.js 中 keyframes 和 animation 必须配对注册
漏掉任意一环，animate-my-loading 类就不会生成——Tailwind 不报错，只是静默忽略。
- keyframes 必须严格放在
theme.extend.keyframes下，键名用引号包裹（如'loading-dots'），百分比写成'0%'、'100%'，不能是0或from - animation 必须在
theme.extend.animation里声明，格式为'my-loading': 'loading-dots 1.2s ease-in-out infinite'，其中时长、缓动、重复数都得显式写出 - 动画名大小写和连字符必须完全一致：keyframes 里是
'loading-dots'，animation 里就不能写成loadingDots或loading_dots
HTML 中触发动画前必须预设起始样式
动画不会“凭空开始”，它依赖元素当前 CSS 状态与关键帧首帧匹配。否则第一帧会跳变或不动。
- 例如
loading-dots从opacity: 0开始 → 按钮需自带opacity-0或内联style="opacity:0" - 若动画含
transform: scale(0.8)→ 元素得先有scale-[0.8]或transform值匹配 - 推荐组合写法：
class="opacity-0 animate-loading-dots"，避免用hidden（display: none 会中断动画）
让加载按钮支持状态切换的关键技巧
真实场景中按钮要经历 loading → success → error 三态，不能只靠一个动画类硬切。
- 用 JS 控制 class 切换：移除
animate-loading-dots，加上animate-checkmark（另一个自定义动画） - 所有自定义动画末尾加
forwards，防止播完回退到初始透明/缩放态 - 想复用 duration/delay 工具类？别把时长写死，改用 CSS 变量：
'loading-dots': 'loading-dots var(--tw-animation-duration, 0.8s) ease-in forwards'，这样duration-500才生效
最容易被忽略的是 content 配置——如果 tailwind.config.js 的 content 数组没包含你写按钮的 HTML 或 JSX 文件路径，animate-my-loading 类根本不会被扫描进最终 CSS，DevTools 里也看不到对应 @keyframes 规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
