自定义动画在Tailwind中必须配对注册keyframes和animation，缺一则animate-类静默失效；keyframes须置于theme.extend.keyframes下，键用引号包裹如'0%'，属性值须为字符串，animation声明须含完整CSS动画语法并严格匹配名称。
自定义动画在 Tailwind 里不会自动生效，必须同时完成 keyframes 和 animation 的配对注册，漏掉任一环节，animate-xxx 类就完全不生成 CSS 规则——浏览器控制台也不报错，只是静默失效。
tailwind.config.js 中 keyframes 必须严格写在 theme.extend.keyframes 下
Keyframes 不能写在 theme.keyframes、theme.animation 或顶层对象里，否则会被忽略。值必须是对象，每个帧用带引号的字符串键（如 '0%'、'to'），不能用数字或不加引号的 0%。
-
'0%'和'100%'可以混用，但不要和'from'/'to'混用（比如'from'+'50%'） - 属性名必须是标准 CSS 可动画属性，且值必须是字符串：
transform: 'translateX(-100%)'✅，translateX: '-100%'❌（Tailwind 不识别独立translateX） -
opacity: 0.3❌（数字值被跳过），opacity: '0.3'✅
animation 配置必须是完整声明字符串，且与 keyframes 名严格一致
theme.extend.animation 里的值不是动画名，而是完整的 CSS animation 属性值，格式为：'name': 'keyframes-name duration timing-function [iteration-count] [fill-mode]'。
- 动画名（如
'fade-in'）在keyframes和animation中必须完全一致：大小写、连字符、引号都不能错 -
forwards很关键，缺了动画播完会回退到初始态（比如 opacity 从 0 → 1 后又变回 0，看起来像“闪一下”） - 时长单位必须是
s或ms：'fade-in 300ms'❌（无单位 300 被忽略），'fade-in 0.3s'✅ - 要支持
duration-300这类变体，得用 CSS 变量：'fade-in': 'fade-in var(--tw-animation-duration, 0.4s) ease-out forwards'
HTML 元素必须预设起始样式，否则动画第一帧会跳变或不动
动画不会“凭空开始”，它依赖元素当前状态与关键帧首帧匹配。如果没对齐，就会跳变、卡住或根本不动。
立即学习“前端免费学习笔记（深入）”；
- 例如
keyframes定义了'0%': { opacity: '0', transform: 'scale(0.8)' }，那 HTML 就得先有opacity-0 scale-[0.8]或内联style="opacity:0;transform:scale(0.8)" - 别给元素加
hidden或opacity-0后再指望动画自己“从 0 开始”——其他 class 会覆盖关键帧的初始值 - 更稳妥的做法是结合
IntersectionObserver，等元素进入视口再添加animate-xxx类，避免页面一加载就全播
最容易被忽略的是配置合法性检查：Tailwind 不报错，只跳过非法项。每次加完配置后，建议运行 npx tailwindcss -o ./dist/tailwind.css --minify，然后搜索生成的 CSS 文件里有没有对应 @keyframes fade-in —— 没有，说明某处语法或位置错了。
