直接加animate-spin不行，因其仅提供无限旋转关键帧，不处理禁用交互、文字切换、颜色过渡及起始态匹配；正确做法须在tailwind.config.js中成对配置keyframes和animation，并配合disabled属性与js状态管理。
按钮的 Loading 状态不能靠 Tailwind 原生工具类“自动切换”，必须手动控制 disabled 属性 + 自定义动画类 + 文案/图标切换，否则会出现点击仍可触发、动画不衔接、状态残留等问题。
为什么直接加 animate-spin 不行？
animate-spin 只是无限旋转关键帧，它不处理：禁用交互、文字隐藏/替换、颜色过渡、动画起始态匹配。常见错误现象包括：
- 按钮还能点击（没加
disabled） - 旋转图标小得看不见（缺
inline-block、h-5 w-5、border-t-transparent） - 动画第一帧跳变（元素初始无
transform或scale，而关键帧首帧写了transform: rotate(0)） - 深色背景上转圈发灰（没配
border-t-white dark:border-t-gray-200）
如何正确注册并使用自定义 loading 动画？
必须在 tailwind.config.js 中成对配置 keyframes 和 animation，漏掉任一环节，类名就无效且不报错：
-
keyframes放在theme.extend.keyframes下，键名加引号，百分比写成'0%'、'100%' -
animation放在theme.extend.animation下，值是完整 CSSanimation字符串，如'loading-dots': 'loading-dots 1.2s ease-in-out infinite' - 两个地方的动画名必须完全一致：大小写、连字符都不能错（
loading-dots≠loadingDots） - 务必加
forwards，否则动画播完会回退到初始透明/缩放态
HTML 和 JS 怎么配合才不翻车？
加载中状态本质是三态流转（idle → loading → success/error），不能只靠一个 class 切换：
- 按钮必须带
type="button"，防止表单重复提交 - 初始态要预设尺寸和显示逻辑，例如：
class="relative px-4 py-2 flex items-center" - 加载中时：加
disabled、移除所有hover:类、插入旋转图标（class="inline-block h-5 w-5 animate-spin border-2 border-blue-500 border-t-transparent"）、替换文案为"处理中..." - 成功/失败后：清除
animate-spin，添加对应状态动画（如animate-checkmark），并恢复disabled={false} - 确保
content配置包含该按钮所在 HTML 文件路径，否则自定义动画类不会被扫描生成
最容易被忽略的是动画起始帧与当前样式不匹配——比如关键帧从 opacity: 0 开始，但元素初始是 opacity-100，那第一帧就会闪一下。真实项目里，建议所有 loading 元素都显式写初始态，别依赖“默认”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
