animate-pulse 延迟需配合 delay- 类（如 delay-300），二者正交共存；Tailwind 默认仅生成 delay-75 至 delay-1000 的整百/七十五值，delay-500 需手动配置或改用支持值。
animate-pulse 默认不支持 delay，必须手动加 delay- 类
很多人试过 animate-pulse delay-500 发现没效果——不是写法错，是 Tailwind 默认不生成带延迟的 delay- 工具类。它只提供基础动画类（如 animate-pulse），延迟类需显式启用或按需生成。
真正起作用的是独立的 delay- 类，比如 delay-75、delay-1000，它们控制的是整个动画的启动时机，和 animate-pulse 是正交关系。
-
delay-类必须和animate-类同时存在才生效，单独写delay-300没任何效果 - 默认配置下，Tailwind 只生成
delay-75到delay-1000的整百/整七十五值（如 75, 100, 150, 200…1000），不包括delay-500ms这种带单位写法 - 如果你需要
delay-500，得确认它在theme.extend.transitionDelay或plugins中已定义，否则编译后 CSS 里压根没这条规则
如何让 animate-pulse 延迟 300ms 启动
最直接的方式：组合使用 animate-pulse 和 delay-300，前提是你的 Tailwind 配置支持该延迟值。
检查方式很简单：打开编译后的 CSS 文件，搜 delay-300。如果没找到，说明配置未覆盖这个值。
- 若用默认配置，
delay-300是存在的（属于默认支持的整百序列） - 若用
jit模式且未启用purge守护，开发时能“热补”类名，但构建时仍依赖配置是否包含该值 - 实际写法就是：
class="animate-pulse delay-300"—— 顺序无关，两个类都得有 - 注意：延迟只影响动画开始时间，不影响脉冲周期（
animate-pulse固定是 2s 循环，不可通过 Tailwind 类调整）
delay-300 和 transition-delay: 300ms 的区别
别混淆：Tailwind 的 delay-300 编译出来就是 transition-delay: 300ms，但它只对 transition 生效；而 animate-pulse 是 @keyframes 动画，它的延迟靠的是 animation-delay。
关键点在于：Tailwind 的 delay- 类，**对 CSS 动画（@keyframes）也生效**，不是只给 transition 用的。这是它和手写 CSS 的一个隐含一致设计。
-
delay-300→ 编译为animation-delay: 300ms; transition-delay: 300ms; - 所以它能正确推迟
animate-pulse的首次播放，不需要额外写style="animation-delay: 300ms" - 但如果你自定义了其他
@keyframes动画，且没配animation-相关工具类，delay-依然管用——只要动画是用animation触发的
为什么 delay-500 写了却没反应
最常见原因：你的 Tailwind 配置没声明 500 这个延迟值，或者用了 purge 且没在代码中显式引用过 delay-500。
尤其在旧版（v2.x）或精简配置中，delay 范围可能只到 300 或仅含 75/100/150/200/300。
- 解决方法一：在
tailwind.config.js中扩展theme.extend.animationDelay，加入500 - 解决方法二：改用已存在的值，比如
delay-400或delay-600（看配置支持哪些） - 解决方法三：临时加内联样式
style="animation-delay: 500ms"，绕过工具类限制（适合调试或一次性场景） - 注意：不要写成
delay-500ms，Tailwind 不识别带单位的类名，只认数字后缀
延迟值不是“写了就一定有”，它本质是预设的 CSS 值映射，漏了就得补配置——这点容易被当成 bug，其实是设计使然。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
