必须在 theme.extend.keyframes 中定义 keyframes，且百分比须加引号；同时需在 theme.extend.animation 中绑定 animate-xxx 类，含时长、缓动和 forwards 填充模式，否则动画播完回退。
直接在 tailwind.config.js 里加 keyframes 和 animation 扩展，就能用自定义类名触发动画——但漏掉 forwards 或写错属性名，动画会闪一下就回退。
如何在 tailwind.config.js 中正确声明 keyframes
必须把关键帧写进 theme.extend.keyframes，不能放在顶层或插件配置里。每个 keyframe 名称（如 slideIn）要唯一，且值必须是对象，键为百分比字符串（'0%'、'100%'），不能写成数字 0 或 100。
- 错误写法：
keyframes: { slideIn: { 0: { transform: 'translateX(-100%)' } } }（缺少引号，浏览器忽略） - 正确写法：
keyframes: { slideIn: { '0%': { transform: 'translateX(-100%)' }, '100%': { transform: 'translateX(0)' } } } - 支持的 CSS 属性有限：只认标准可动画属性（
opacity、transform、color等），display或height不行
为什么必须同时配置 animation 才能用 class 触发
keyframes 只是定义了“怎么动”，不等于“能用”。得在 theme.extend.animation 里绑定一个工具类名（如 animate-slide-in）到具体动画规则，包括时长、缓动和填充模式。
- 漏掉
forwards：动画播完立刻恢复初始状态（比如opacity: 0又回来了） - 常见完整写法：
slideIn: 'slideIn 0.4s ease-out forwards' - 如果想复用时长/缓动，建议抽成变量：
const anim = '0.4s ease-out forwards'; animation: { slideIn: `slideIn ${anim}` }
HTML 中使用 animate-xxx 类时的典型陷阱
类名生效 ≠ 动画自动播放。它依赖元素初始状态是否与动画起始帧匹配，否则会跳变或不动。
- 例如
slideIn从translateX(-100%)开始 → 元素必须初始有transform: translateX(-100%)，否则第一帧就“闪现”到目标位置 - 推荐搭配初始隐藏类：
class="opacity-0 translate-x-[-100%] animate-slide-in" - 动画默认会循环（
animation-iteration-count: infinite），除非显式覆盖：在animation值末尾加forwards或单独加animation-fill-mode: forwards
调试自定义动画没反应的三个检查点
打开 DevTools 的 Animations 面板，看是否识别到该动画；若没出现，说明配置未生效或类名拼错。
- 检查
content配置是否包含当前 HTML 文件路径（否则animate-slide-in类不会被生成） - 确认 Tailwind 已重启：改完
tailwind.config.js后需重启构建进程（npm run dev或pnpm dev） - 浏览器不支持某些 transform 写法：比如
translateX(-100vw)在旧 Safari 上可能失效，优先用%或rem
最易被忽略的是：动画类一旦添加就立即执行，没有“等待进入视口”的逻辑——滚动触发动画必须配合 IntersectionObserver 手动控制类的增删，不能只靠 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
