自定义关键帧动画必须在tailwind.config.js的theme.extend.keyframes中声明，且须在theme.extend.animation中以完全匹配的字符串名显式绑定完整动画规则（如'fade-in': 'fade-in 0.4s ease-out forwards'），否则不生成CSS规则；键名、帧值、属性写法均需严格符合规范，HTML元素还需满足尺寸、display及初始样式无冲突等触发条件。
自定义关键帧动画在 Tailwind 中必须通过 tailwind.config.js 配置，写死在 CSS 文件里或用 JS 动态注入都无效。
keyframes 必须放在 theme.extend.keyframes 里
Tailwind 只识别这个路径下的 keyframes 配置。写在 theme.keyframes、顶层对象、插件内部，甚至 plugins: [] 里，都不会生成 @keyframes 规则——浏览器开发者工具里搜不到，动画自然不生效。
- ✅ 正确位置：
theme: { extend: { keyframes: { 'fade-in': { '0%': { opacity: '0' }, '100%': { opacity: '1' } } } } - ❌ 错误写法：
theme: { keyframes: { ... } }或keyframes: { ... }（顶层） - ⚠️ 键名必须是字符串：不能用数字、变量、Symbol，比如
0或[myAnim]都不行，只能是'fade-in' - ⚠️ 帧内只写标准 CSS 属性：比如
transform: 'translateX(-100%)'✅，但translateX: '-100%'❌（不是合法 CSS 属性写法）
animation 工具类必须显式绑定且格式完整
光定义 keyframes 不会自动产出 animate-fade-in 这样的工具类。你得在 theme.extend.animation 里手动注册，且值必须是完整的 CSS animation 属性字符串。
- ✅ 正确写法：
'fade-in': 'fade-in 0.4s ease-out forwards' - ❌ 缺时长：
'fade-in': 'fade-in'→ 浏览器忽略整个声明 - ❌ 单位缺失：
'fade-in': 'fade-in 400 ease-out'→400被当作文本丢弃，等效于没写时长 - ❌ 名字不一致：
keyframes里叫'fade-in'，animation里写成'fadeIn'或'fade_in'→ 绑定失败，无 class 生成 - ⚠️
forwards很关键：缺它会导致动画播完立刻回退到初始态，比如opacity: 0的元素播完又变透明
HTML 元素必须满足动画触发条件
配置全对、class 也加了，但动画不动？大概率是元素本身“卡住”了——不是 Tailwind 的问题，而是 CSS 渲染机制限制。
立即学习“前端免费学习笔记（深入）”；
- SVG 加
animate-spin不转：默认display: inline且无宽高，transform: rotate()不触发渲染 → 改成inline-block w-6 h-6或设display: block - 渐显动画没效果：元素自带
opacity-0或hidden→ 初始样式覆盖了关键帧的'0%': { opacity: '0' }，动画第一帧就卡死 → 移除冲突 class，让动画完全控制起始态 - 路径动画错位：用
stroke-dasharray+stroke-dashoffset时，硬编码像素值（如'100'）在响应式下失效 → 必须用 JS 读取path.getTotalLength()并设为 CSS 变量style="--svg-path-length: 123"，关键帧里引用var(--svg-path-length)
改完配置后必须验证输出文件
很多人跳过这步，导致反复调试却找不到根源。Tailwind 不报错，只是静默忽略错误配置。
- 运行构建命令：
npx tailwindcss -o ./dist/tailwind.css --minify - 打开输出的
tailwind.css，搜索@keyframes fade-in或.animate-fade-in - 搜不到 → 配置路径/语法错，或未被
content扫描到（比如 config.js 没被正确 require） - 搜到了但动画不动 → 回头检查 HTML 元素尺寸、display、初始样式冲突
- ⚠️ Tailwind 4.0.9 开启
prefix后，自定义关键帧会静默失效（已知 bug），临时方案是禁用前缀或降级
最常被忽略的是：动画名大小写和连字符必须一字不差，forwards 不能漏，以及 HTML 元素是否真的“活”着——有尺寸、有 display、没被其他 class 锁死初始状态。
