tailwind 的 keyframes 必须严格定义在 theme.extend.keyframes 下，且需在 theme.extend.animation 中显式声明动画类；html 元素须预设起始样式，否则动画跳变；content 配置和 devtools animations 面板是调试关键。
tailwind.config.js 里 keyframes 必须写在 theme.extend.keyframes 下
直接往 theme.keyframes 或顶层对象里塞 keyframes，Tailwind 会完全忽略——它只认 theme.extend.keyframes 这个路径。这个位置不是可选的，是硬性约定。
常见错误写法：keyframes: { slideIn: { 0: { transform: 'translateX(-100%)' } } }（百分比没加引号）或 theme: { keyframes: { ... } }（没走 extend）
正确结构必须是：
module.exports = {
theme: {
extend: {
keyframes: {
'slide-in': {
'0%': { transform: 'translateX(-100%)' },
'100%': { transform: 'translateX(0)' }
}
}
}
}
}
animation 工具类必须显式绑定 duration、timing-function 和 forwards
keyframes 只是“动画脚本”，不等于“能用的 class”。你得在 theme.extend.animation 里把它包装成一个完整声明，否则 animate-slide-in 类根本不会生成。
- 漏掉
forwards：动画播完立刻回退到初始状态（比如opacity: 0又回来了） - 写错属性名：比如把
ease-out拼成easeout，浏览器不识别，整个 animation 值失效 - 时长单位必须带
s或ms：'0.4'不行，得是'0.4s'
推荐写法（带变量复用）：
const anim = '0.4s ease-out forwards'
// ...
animation: {
'slide-in': `slide-in ${anim}`
}
HTML 中用 animate-xxx 类前，必须匹配起始帧的初始样式
类名生效 ≠ 动画自动播放。如果元素初始状态和关键帧的 '0%' 不一致，就会跳变、闪一下，甚至不动。
例如定义了 'slide-in': { '0%': { transform: 'translateX(-100%)' } }，但 HTML 元素没设 translate-x-[-100%]，那第一帧就直接“闪现”到 translateX(0)。
安全写法是组合使用：
<div class="opacity-0 translate-x-[-100%] animate-slide-in"></div>
这样 DOM 渲染时元素已处于动画起点，动画一触发就自然开始。
调试动画不生效，先看 DevTools Animations 面板和 content 配置
两个最容易被忽略的点：
- 打开浏览器 DevTools → Animations 面板，看有没有列出你的动画名（如
slide-in）。没有？说明配置没加载或类名拼错 - 检查
content数组是否包含当前 HTML 文件路径。Tailwind 默认只扫描content列出的文件生成工具类；如果页面文件不在里面，animate-slide-in根本不会被生成
另外注意：自定义动画不支持 display、height、width 等非可动画属性，只认 opacity、transform、color 等标准属性——这点连很多老手都会踩坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
