Tailwind中@keyframes必须严格配置在theme.extend.keyframes下，键名用单引号，帧用'0%'/'to'等字符串，属性值须为字符串；animation需在theme.extend.animation中配完整CSS声明，单位不可省略，起始状态需与关键帧对齐。
Tailwind 里写复杂 @keyframes 不难，难在它不报错、不提醒，只静默跳过非法配置——你写了 10 行，可能只有前 3 行生效，其余全被忽略。
keyframes 必须严格放在 theme.extend.keyframes 下
这是硬性路径，不是建议。写错位置等于没写：
-
theme.keyframes、theme.animation或顶层对象里塞keyframes→ 完全被忽略 - 必须是
theme: { extend: { keyframes: { ... } } }结构 - 键名（如
'slide-in'）要用单引号包裹，不能是slideIn或slide_in
帧定义必须用字符串键 + 字符串值
常见静默失效点都在这里：
- 帧键必须是
'0%'、'50%'、'100%'或'from'/'to'，不能是0%（没引号）或0（数字） - 属性名必须是标准 CSS 属性：✅
transform: 'translateY(-10px) scale(0.95)'，❌translateY: '-10px'（Tailwind 不识别独立 transform 子属性） - 值必须是字符串：✅
opacity: '0.2'，❌opacity: 0.2（数字会被跳过） - 支持
'0%, 100%'合并写法，但别混用'from'和'50%'
animation 配置必须是完整声明字符串
theme.extend.animation 不是注册动画名，而是生成最终的 animation CSS 值：
- 键名（如
'float-bounce'）要和keyframes里的名字完全一致（大小写、连字符、引号） - 值必须是完整字符串：
'float-bounce 2.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both' - 单位必须是
s或ms：'float-bounce 2400ms'✅，'float-bounce 2400'❌（无单位被忽略） -
forwards或both很关键：缺了它，动画播完就回退到初始态（比如opacity从 0 → 1 后又变回 0） - 要兼容
duration-300，得用 CSS 变量：'float-bounce var(--tw-animation-duration, 2s) ease-out forwards'
HTML 元素起始状态必须对齐关键帧首帧
动画不会“覆盖”已有样式，而是叠加或冲突：
- 如果
keyframes从'0%': { opacity: '0', transform: 'scale(0.85)' }开始，元素就得自带opacity-0 scale-[0.85]或内联style="opacity:0;transform:scale(0.85)" - 别给元素加
hidden或opacity-0后再指望animate-fade-in自己“启动”，其他 class 会压掉关键帧的初始值 - 更稳妥的做法是用
IntersectionObserver，等元素进入视口再添加animate-xxx类，避免页面一加载就全播、卡顿或跳变
最常被忽略的是配置合法性——Tailwind 不校验也不报错，只跳过非法项。每次改完配置，建议运行 npx tailwindcss -o ./dist/tailwind.css --minify，然后搜索输出文件里有没有对应的 @keyframes float-bounce，没有就是某处语法不合法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
