必须在theme.extend.keyframes和theme.extend.animation中配对注册自定义动画，keyframes定义帧逻辑，animation绑定完整声明（含时长、缓动、forwards），缺一则animate-类不生成；百分比须加引号，属性值须为字符串，支持duration等变体需用CSS变量。
自定义动画在 Tail
win
d 里能用，但不是“写完 keyframes 就自动有 class”——
和
必须配对注册，漏一个，
类就完全不生成 CSS 规则。
tailwind.config.js 里 keyframes 怎么写才合法
必须放在
下，键是动画名（如
），值是对象，每个帧用带引号的百分比字符串作键（
、
或
、
），不能用数字或不加引号。
属性名必须是标准 CSS 可动画属性，且值必须是字符串：
✅ 正确
❌ 静默忽略，Tailwind 不识别独立
❌ 值不是字符串，会被跳过
✅ 正确
animation 工具类为什么加了也不动
常见原因不是代码写错，而是配置没对齐。你得同时做两件事：
立即学习
“
前端免费学习笔记（深入）
”；
在
里定义好帧逻辑（比如
）
在
里绑定工具类名（比如
），值必须是完整声明：
缺一不可。浏览器控制台不会报错，只是最终 CSS 里压根没有
这个类。
Trae win
Trae Windows 官方版本现已全面支持 Win10 和 Win11 系统（64位）。国内开发者可直接访问 Trae 中文官网（trae.cn 或 trae.com.cn），一键下载官方正版 .exe 安装包，享受国内直连的高速稳定体验。安装过程极其简便，双击即可运行，并支持一键无缝导入 VS Code 或 Cursor 的原有主题、快捷键及插件配置。登录支持手机号、微信或稀土掘金账号。内置免费的豆包与 DeepSeek 等顶级大模型，让你开箱即用，轻松开启高效的 AI 智能编程之旅。
下载
特别注意：
很容易被漏掉。没它，动画播完立刻回退到初始状态——比如
从 0 → 1，播完又变回 0，看起来像“闪一下”。
怎么让自定义动画支持 duration-300、delay-75 这类变体
Tailwind 的
、
是通过 CSS 变量覆盖
和
实现的。你的自定义动画要兼容，就不能把时长写死：
❌ 错误：
✅ 正确：
这样加
才会真正变成 300ms。否则
没任何效果。
SVG 路径动画为什么总卡在起点
SVG
动画依赖
和
，而 Tailwind 不内置路径动画类。你得手动注册关键帧，并确保三者一致：
中
注册类名，如
CSS 文件中（如
）定义
，名字必须完全一致
每个
需单独设
和初始
，否则动画起始位置错乱
更麻烦的是：如果用
控制勾选状态，所有路径必须在同一
下，且
要靠 JS 同步更新——不然状态切换时动画不会触发。
theme.extend.keyframestheme.extend.animationanimate-xxxtheme.extend.keyframes'slide-in''0%''100%''from''to''0%': { transform: 'translateX(-100%)' }'0%': { translateX: '-100%' }translateX'0%': { opacity: 0.3 }'0%': { opacity: '0.3' }theme.extend.keyframes'spin-slow'theme.extend.animationspin-slow'spin-slow 0.8s ease-in-out forwards'.animate-spin-slowforwardsopacityduration-*delay-*animation-durationanimation-delayspin-slow: 'spin-slow 2s linear infinite'spin-slow: 'spin-slow var(--tw-animation-duration, 1s) linear infinite'class="animate-spin-slow duration-300"duration-300stroke-dasharraystroke-dashoffsettailwind.config.jstheme.extend.animationanimate-svg-path-start: 'svg-path-dash 0.4s ease-out forwards'src/tailwind.css@keyframes svg-path-dashstroke-dasharraystroke-dashoffsetgroup-data-[checked]:animate-svg-path-startdata-checked