自定义动画需同时配置 theme.extend.keyframes 和 theme.extend.animation；keyframes 键值须全为字符串且符合 CSS 规范；animation 值须为完整 CSS animation 字符串；HTML 元素需预设关键帧起始态。
自定义动画在 Tailwind 里不会自动生效，必须同时完成 theme.extend.keyframes 和 theme.extend.animation 两处配置，缺一不可——漏掉任一环节，animate-xxx 类根本不会生成 CSS 规则，浏览器控制台也不报错，只是静默失效。
keyframes 配置必须用字符串键和字符串值
Tailwind 对 keyframes 的语法极其严格：百分比必须加引号（如 '0%' 或 'from'），属性名必须是标准 CSS 属性（如 transform，不能拆成 translateX），属性值必须是字符串（如 'translateY(-10px)'，不能是 translateY(-10px) 或数字 0.5）。
-
'0%': { opacity: '0', transform: 'scale(0.8)' }✅ 合法 -
'0%': { opacity: 0, transform: 'scale(0.8)' }❌opacity值不是字符串，被忽略 -
'0%': { scale: '0.8' }❌scale不是标准 CSS 属性，无效 -
0%: { transform: 'scale(0.8)' }❌ 键没加引号，整个帧被跳过
animation 声明必须是完整 CSS animation 字符串
theme.extend.animation 里的值不是“动画名”，而是直接塞进 CSS animation 属性的完整字符串。它决定时长、缓动、填充模式（forwards）、是否循环等——这些都不能靠工具类补全，必须显式写出。
-
'fade-in': 'fade-in 0.3s ease-out forwards'✅ 正确，含填充模式 -
'fade-in': 'fade-in 0.3s'❌ 缺少缓动函数，浏览器用默认ease，行为不可控 -
'fade-in': 'fade-in 300ms'❌ 单位写成ms但未加引号，Tailwind 解析失败 -
'fade-in': 'fade-in var(--tw-animation-duration, 0.3s) ease-out forwards'✅ 支持duration-*变体
HTML 元素必须匹配关键帧起始态
动画不会“凭空开始”。如果关键帧第一帧是 '0%': { opacity: '0', transform: 'translateX(-100%)' }，而元素初始没有 opacity-0 和 translate-x-[-100%]，那动画一触发就会跳变或卡住。
立即学习“前端免费学习笔记（深入）”；
- 安全写法：
<div class="opacity-0 translate-x-[-100%] animate-fade-in"></div> - 避免冲突：不要给元素加
hidden或opacity-0后再指望动画从 0 → 1——初始样式会覆盖关键帧首帧 - 调试建议：打开 Chrome DevTools → Animations 面板，看动画是否被识别；再搜生成的
tailwind.css文件里有没有对应@keyframes fade-in
最容易被忽略的是 keyframes 值的合法性——Tailwind 不校验也不报错，只跳过非法项。每次加完配置，务必运行 npx tailwindcss -o ./dist/tailwind.css --minify 并检查输出文件，确认 @keyframes 和 .animate-xxx 真的生成了。
