keyframes 必须写在 theme.extend.keyframes 下，且键为字符串、值为合法 css 属性字符串对象；还需在 theme.extend.animation 中显式绑定 animation 类，否则不生成对应 css 规则。
必须把 keyframes 写进 theme.extend.keyframes，否则 Tailwind 根本不认——不是没效果，是压根不生成 CSS 规则。
keyframes 必须放在 theme.extend.keyframes 下
Tailwind 只扫描这个固定路径。写在 theme.keyframes、keyframes 顶层、插件对象里，全都会被忽略，控制台也不报错，只是动画类完全不出现。
-
theme.extend.keyframes是硬性约定，不是推荐路径 - 键名必须是字符串（如
'slide-in'），不能用变量或数字 - 值必须是对象，每个帧用带引号的百分比或关键词作键：
'0%'、'100%'或'from'、'to'，混用（比如'from'和'50%'）会静默失效
keyframes 对象里的属性必须合法且为字符串值
Tailwind 不解析 CSS 语义，只做字符串拼接。写错属性名或值类型，它就跳过那一帧，不警告也不提示。
- ✅ 正确：
'0%': { transform: 'translateX(-100%)' }（transform是标准属性，值是字符串） - ❌ 无效：
'0%': { translateX: '-100%' }（translateX不是标准可动画 CSS 属性） - ❌ 无效：
'0%': { opacity: 0.3 }（值不是字符串，得写成'0.3'） - ✅ 支持
from/to，但别和百分比混用；opacity、transform、scale等都必须是完整 CSS 属性名
光写 keyframes 不够，还得配对注册 animation
animate-slide-in 这类工具类不会自动产生。你得在 theme.extend.animation 里显式绑定，格式是完整 CSS animation 声明字符串。
- 键是类名后缀（如
slide-in），值是字符串：'slide-in': 'slide-in 300ms ease-out forwards' - duration 单位必须是
ms或s，写300（无单位）会被忽略 - 建议加
forwards，否则动画播完元素样式会回退到初始态 - 别漏空格——
'slide-in 300ms ease-out'✅，'slide-in300ms'❌
最容易被忽略的是：改完配置后没验证生成结果。运行 npx tailwindcss -o ./dist/tailwind.css --minify，然后搜 @keyframes slide-in，找不到就说明 keyframes 配置根本没被读取——八成是位置或语法错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
