tailwind.config.js 中未将 tailwindcss-animate 加入 plugins 数组会导致 animate-in 等动画类失效；必须显式配置 plugins: [require('tailwindcss-animate')] 并重启开发服务器。
tailwind.config.js 里漏配 plugins 就没动画类
装了 tailwindcss-animate 却用不了 animate-in 类？大概率是配置没生效。Tailwind 不会自动识别插件，必须显式写进 plugins 数组。
常见错误：只运行了 npm install -D tailwindcss-animate，但没改 tailwind.config.js；或者改了但忘了重启开发服务器（改配置后必须重启）。
- 确认
tailwind.config.js中plugins是数组，且包含require('tailwindcss-animate') - 不要写成字符串
'tailwindcss-animate'或对象形式 - 如果用了 TypeScript，确保
tailwind.config.ts里导出的是默认对象，且plugins字段未被类型断言意外过滤
animate- 类名拼错或没对应 keyframes
比如写了 animate-fade-in 却没效果，可能是因为：
-
fade-in是tailwindcss-animate提供的预设类，但你项目里装的是另一个动画库（如tailwindcss-animated），类名前缀或命名不一致 - 手动加了自定义动画，但只在
theme.extend.keyframes里写了帧，却漏了theme.extend.animation的映射 - 动画名大小写/连字符不匹配：keyframes 里定义的是
spinSlow，animation 里却写spin-slow，两者必须完全一致
快速验证：打开浏览器开发者工具，在 Elements 面板里右键元素 → “Edit as HTML”，临时加上 class="animate-pulse"。如果它动了，说明插件加载成功；如果不动，问题出在插件本身或配置。
第三方 CSS 动画库（如 SpinKit）和 Tailwind 共存时样式冲突
SpinKit 这类库自带完整 CSS 规则（含 @keyframes 和类选择器），和 Tailwind 的 utility-first 原则天然不兼容——它不走 animate- 流程，而是靠自己的 class 名触发。
- 别试图用
animate-spin覆盖sk-rotate；它们互不影响，得并存使用 - SpinKit 的尺寸、颜色控制依赖自身 class（如
sk-pulse），Tailwind 的h-8 w-8 text-red-500只能作用于容器，对内部伪元素无效——需额外用!text-red-500或覆盖其border-color - 若页面同时用了多个动画库，注意 CSS 优先级：SpinKit 的原始 CSS 文件引入顺序靠后，容易覆盖 Tailwind 的
animation-duration等属性
自定义动画想支持 duration-*、delay-* 必须用 CSS 变量
Tailwind 的 duration-300 能生效，是因为它设置的是 animation-duration: 300ms。但如果你在 theme.extend.animation 里把时长写死成 'my-spin 2s linear infinite'，那 duration-300 就完全无效。
正确写法是：
animation: {
'my-spin': 'my-spin var(--tw-animation-duration, 1s) linear infinite',
}
这样 Tailwind 才能通过注入 CSS 变量接管时长。同理，delay-* 依赖 var(--tw-animation-delay)，ease-* 依赖 var(--tw-animation-easing)。漏掉变量，变体类就形同虚设。
真正麻烦的不是写配置，而是调试时看不到报错——动画静止，控制台也安静。得手动检查生成的 CSS 文件里有没有对应 @keyframes 和 .animate-my-spin 规则，再逐层比对变量是否被覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
