<p>最彻底禁用所有 animate- 类的方式是关闭 Tailwind 的 animation 核心插件，即在 tailwind.config.js 的 corePlugins 中设置 animation: false，修改后需重启开发服务器，所有 animate-* 类及自定义 keyframes 均不生成 CSS。</p>
直接禁用 animation 插件最彻底
想让所有 animate- 类完全不生成，唯一可靠方式是关闭 Tailwind 的 animation 核心插件。它不是隐藏类名，而是让编译器压根不输出任何相关 CSS 规则——包括你自定义的 keyframes 和 animation 声明。
在 tailwind.config.js 的 corePlugins 中设为 false：
module.exports = {
corePlugins: {
animation: false,
}
}改完必须重启开发服务器（如 Vite 或 Next.js dev），HMR 不会重新处理 corePlugins 配置。
- 所有
animate-bounce、animate-pulse、animate-spin等类名将失效，HTML 中写了也无 CSS 对应 - 你之前在
theme.extend.keyframes和theme.extend.animation里写的自定义动画，同样不会出现在最终 CSS 中 - 不影响 transition 类——它们由独立插件控制，需单独关掉
transition
只关 transition 而保留动画？可以但要小心
transition 是另一个可开关的 corePlugin，关掉后所有 transition-、duration-、ease- 类都不生效。
立即学习“前端免费学习笔记（深入）”；
但它和 animation 是两套机制：前者依赖状态变化（hover/focus/JS 切换）+ 属性变更；后者是主动播放帧序列。关了 transition 不影响 animate-spin 这类纯 CSS 动画。
- 若只想停掉 hover 缩放、淡入淡出这类过渡，保留 loading spinner，就只关
transition - 别指望靠
purge或content配置“过滤掉 animate- 类”——那是 tree-shaking，不是禁用；只要 class 出现在扫描路径里，就会生成 - 关了
transition后，transition-all、duration-300这些类名仍可写，但 DevTools 里查不到对应 CSS 声明
临时停用单个元素的动画
有时你只是想某个按钮点击时不转圈，或某个弹窗入场不淡入——不需要全局关，用 animation-none 或内联 style 更轻量。
Tailwind 没内置 animation-none，但你可以自己加：
module.exports = {
theme: {
extend: {
animation: {
none: 'none',
}
}
}
}然后在元素上用 animate-none 即可。或者更直接：
- 用内联
style={{ animation: 'none' }}（React）或style="animation: none"（HTML） - 用
animation-play-state: paused暂停而非清除——适合 JS 控制启停的场景 - 避免混用：比如同时加
animate-spin和animate-none，后者会被前者覆盖，因为 class 顺序靠后
为什么删掉 config 里的 keyframes 没用？
很多人以为删了 theme.extend.keyframes 就能停动画，其实没用——Tailwind 默认自带一套基础动画（spin、ping、pulse、bounce），它们硬编码在源码里，不依赖你的配置。
真正起作用的是 corePlugins.animation 开关。哪怕你清空整个 theme.extend，只要这个插件开着，animate-spin 就依然有效。
容易被忽略的一点：关掉 animation 后，@keyframes 规则不会出现在最终 CSS 里，但你在 CSS 文件里手写的 @keyframes 依然存在——Tailwind 不管那些，它只管自己生成的部分。
