keyframes 必须写在 theme.extend.keyframes 下，且百分比和属性值需为字符串，动画名大小写与连字符须严格一致；否则 tailwind 静默忽略，不报错也不生成 css。
必须把 keyframes 写在 theme.extend.keyframes 下，否则完全不生效——Tailwind 不报错，也不生成任何 CSS 规则。
keyframes 必须放在 theme.extend.keyframes 里
很多人直接往 theme.keyframes 或顶层对象里塞，结果动画类怎么加都没反应。Tailwind 只认 theme.extend.keyframes 这个路径，其他位置一律忽略。
- ✅ 正确位置：
theme: { extend: { keyframes: { 'fade-in': { ... } } } } - ❌ 错误写法：
theme: { keyframes: { ... } }或module.exports = { keyframes: { ... } } - 配置改完后，建议运行
npx tailwindcss -o ./dist/tailwind.css --minify，然后搜索生成文件里有没有@keyframes fade-in，没有就是位置或语法错了
百分比和属性值必须是字符串
keyframes 的键和值都有硬性格式要求：百分比得带引号，CSS 属性值也得是字符串，否则静默跳过。
- ✅ 正确：
'0%': { opacity: '0', transform: 'translateY(10px)' } - ❌ 错误：
0%: { opacity: 0 }（没引号、值不是字符串） - ❌ 错误：
'0%': { translateY: '10px' }（translateY不是标准 CSS 属性，得写进transform） -
from和to可以替代'0%'/'100%'，但别混用，比如from+'50%'会失效
动画名大小写与连字符必须严格一致
你在 keyframes 里定义的键名，比如 'loading-dots'，之后在 animation 配置里引用时，必须一模一样——包括连字符、大小写、引号包裹与否。
- ✅
keyframes: { 'loading-dots': { ... } }→animation: { 'my-loading': 'loading-dots 1.2s infinite' } - ❌
keyframes: { loadingDots: { ... } }或animation: { 'my-loading': 'loading_dots ...' }都会导致animate-my-loading类压根不生成 - 这个一致性还影响 HTML 中使用的类名：
animate-my-loading里的my-loading必须和animation对象的键完全匹配
最容易被忽略的是：Tailwind 对非法 keyframes 条目完全静默处理，既不警告也不报错。你得自己验证生成的 CSS 是否包含对应 @keyframes 块，否则可能调半天才发现是引号漏了或者 transform 写成了 translateX。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
