Tailwind自定义动画必须严格配对注册keyframes和animation：keyframes须置于theme.extend.keyframes下，键用引号包裹（如'0%'），属性值为字符串；animation须在theme.extend.animation中声明完整CSS语法（如'fade-in': 'fade-in 0.4s ease-out forwards'），且名称大小写、连字符须完全一致；缺一环节则animate类静默失效。
keyframes 必须放在 theme.extend.keyframes 下，不能写错位置
Tailwind 只认 theme.extend.keyframes 这个路径，写在 theme.keyframes、theme.animation 甚至顶层对象里，都会被完全忽略。配置后不生效？第一反应就该检查这个位置是否正确。
键名必须是字符串，比如 '0%'、'100%'、'from'、'to' —— 写成 0%（无引号）或 0（数字）会静默失败。值必须是对象，且属性名得是标准 CSS 属性：
-
'0%': { transform: 'translateX(-100%)' }✅ 正确 -
'0%': { translateX: '-100%' }❌ Tailwind 不识别独立的translateX -
'0%': { opacity: 0.3 }❌ 数字值被跳过，必须写成opacity: '0.3'
theme.extend.animation 的值不是动画名，而是完整 CSS animation 声明
很多人误以为这里填的是“动画名”，其实它会被原样塞进 CSS 的 animation 属性里。格式必须严格：
- 动画名（如
fade-in）要和keyframes中定义的完全一致：大小写、连字符、引号都不能差 - 时长单位只能是
s或ms：'fade-in 0.4s ease-out forwards'✅，'fade-in 400ms'✅，'fade-in 400'❌（无单位被忽略） -
forwards很关键：缺了它，动画播完会回退到初始态（比如opacity从 0 → 1 后又变回 0） - 要支持
duration-300这类工具类，得用 CSS 变量：'fade-in': 'fade-in var(--tw-animation-duration, 0.4s) ease-out forwards'
HTML 元素必须预设起始样式，否则动画卡住或跳变
动画不会“凭空开始”。它依赖元素当前状态与关键帧首帧（如 '0%'）对齐。如果没对齐，常见现象是：
- 第一帧闪一下再动（起始态和
'0%'不一致） - 根本不动（比如
opacity-0覆盖了 keyframes 的opacity: '0'） - 播放后立刻消失（缺
forwards，结束态没保留）
稳妥做法是显式设置初始类或内联样式：class="opacity-0 animate-fade-in"，而不是靠动画自己“推”出初始态。
验证配置是否生效的最快方式
运行 npx tailwindcss -o ./dist/tailwind.css --minify，然后搜索输出 CSS 文件里有没有 @keyframes fade-in 和 .animate-fade-in。没有？说明配置有语法错误或位置不对——Tailwind 不报错，只跳过非法项。
最容易被忽略的是引号、字符串值、forwards 和初始样式这四点。少一个，动画就只是“看起来写了”，实际没动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
