需在tailwind.config.js的theme.extend.keyframes和theme.extend.animation中配对注册自定义@keyframes，缺一不可；keyframes定义动画帧，animation映射类名与完整声明，且动画名须完全一致。
怎么在Tailwind里加自定义@keyframes？
Tailwind默认不包含你写的动画帧，得手动注入。它不会自动扫描你的CSS文件找@keyframes，必须显式告诉它“这个动画我需要”。
做法是：在tailwind.config.js的theme.extend.animation和theme.extend.keyframes里配对注册——前者是动画名（供class用），后者是实际帧定义（CSS规则）。缺一不可，否则animate-my-spin会无效，控制台也不报错，只是没效果。
- keyframes定义写在
theme.extend.keyframes里，值是对象，键是动画名（如spin-slow），值是标准CSS keyframes字符串（{ '0%': { transform: 'rotate(0deg)' }, '100%': { transform: 'rotate(360deg)' } }） - animation映射写在
theme.extend.animation里，键是类名后缀（如spin-slow），值是'spin-slow 2s linear infinite'这种完整声明（含时长、缓动、重复） - 别把
@keyframes直接写在CSS里再指望Tailwind识别——它不解析外部样式表
animate-类名不生效的常见原因
最常踩的坑是配置了keyframes但忘了配animation，或者反过来。Tailwind生成的CSS只包含你在animation里声明过的类，哪怕keyframes写对了也没用。
另一个隐形雷：动画名里用了短横线（fade-in-out），但keyframes对象的键写成fadeInOut，大小写或连字符不一致就断联。浏览器开发者工具里搜@keyframes fade-in-out，如果没找到，基本就是注册失败。
- 检查
tailwind.config.js是否已重启开发服务器（改配置后需重启） - 确认
animate-类名拼写和animation里的键完全一致（包括短横线、大小写） - 用
!important临时测试：加class="animate-spin-slow !important"，如果这时动了，说明有更高优先级样式覆盖了动画
怎么让自定义动画支持duration、delay等变体？
Tailwind默认的animate-pulse能叠加duration-75或delay-100，是因为这些工具类操作的是animation-duration和animation-delay属性。你的自定义动画只要没重写这些属性，就能兼容。
关键点：在theme.extend.animation里定义时，**不要把时长写死进字符串里**。比如别写'spin-slow 2s linear infinite'，而要写'spin-slow var(--tw-animation-duration, 1s) linear infinite'——这样duration-300才能通过CSS变量覆盖。
- Tailwind内置的
duration-系列工具类，本质是设置--tw-animation-duration变量 - 同理，
delay-对应--tw-animation-delay，ease-对应--tw-animation-easing - 如果你的动画需要独立控制这些值，就在
animation值里用var(--tw-xxx)占位，而不是硬编码
为什么加了动画但元素不动？检查transform和visibility
动画本身跑起来了，但肉眼看不出来，大概率是transform没触发重绘，或元素被visibility: hidden锁死了。
Tailwind的animate-类只管animation属性，不管元素是否可渲染。比如给opacity-0的元素加animate-fade-in，它还是透明的——动画执行了，只是你没看见。
- 确保元素没有
display: none或visibility: hidden（opacity: 0不影响动画触发） - 如果动画依赖
transform（如旋转、缩放），确认父容器没设overflow: hidden裁掉动作范围 - 用开发者工具选中元素，看
animation属性是否出现在Computed面板里，且状态是running
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
