animate-pulse 不能直接用于骨架屏，因其默认使整个容器同步闪烁，缺乏层次感；需配合 bg-gray-200、rounded 及 overflow-hidden 限制作用域，并避免直接作用于 img/svg。
animate-pulse 在 Tailwind 中为什么不能直接用
因为 animate-pulse 默认只作用于元素自身，而骨架屏需要的是「多个区块按需闪烁」，不是整个容器一起呼吸式闪烁。直接加 animate-pulse 往往导致内容区域整体发亮、缺乏层次，视觉上不像加载中的“占位”，更像在闪灯。
真正可用的骨架屏，得靠组合：用 bg-gray-200（或 bg-slate-200）模拟未加载内容的灰阶底色 + rounded 控制形状 + animate-pulse 控制节奏，且必须限制动画作用域。
- 确保父容器有
overflow-hidden，否则圆角+脉冲可能溢出 - 避免对
img或svg直接加animate-pulse—— 它们通常需要先用bg-gray-200遮盖，再动画 - Tailwind v3.4+ 默认启用
animate-pulse，但若项目自定义了animation层，需确认theme.extend.animation包含了pulse
怎么用 animate-pulse 做出「像样」的骨架行
典型场景：列表项加载中，每行要显示头像、标题、副文本三段占位。关键不是堆 class，而是结构对齐 + 动画克制。
<div class="flex items-center space-x-3 p-4 bg-white animate-pulse">
<div class="bg-gray-200 rounded-full w-10 h-10"></div>
<div class="flex-1">
<div class="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
<div class="h-3 bg-gray-200 rounded w-1/2"></div>
</div>
</div>
-
animate-pulse加在最外层容器，让所有子bg-gray-200元素同步呼吸，比每个元素单独加更轻量 - 高度用
h-4/h-3而非固定h-5，保持与真实文本行高一致（Tailwind 默认h-4≈ 1rem） - 宽度控制用
w-3/4、w-1/2比写死w-48更适应响应式 - 别忘了
rounded—— 骨架屏圆角是现代 UI 的默认心理预期，硬边会显得生硬
animate-pulse 性能和兼容性要注意什么
它本质是 CSS @keyframes pulse，触发重绘而非重排，性能尚可，但有两个实际坑点：
立即学习“前端免费学习笔记（深入）”；
- 在 iOS Safari 15.4–16.3 上，
animate-pulse可能导致input失焦或滚动卡顿 —— 解决办法是加载完成时用className.replace('animate-pulse', '')彻底移除，而不是仅加hidden - 如果骨架屏嵌套过深（比如在
transition-all容器里），动画可能被中断；建议加载状态用独立 class 控制，如loading，配合group-[.loading]:animate-pulse更可控 - SSR 场景下，服务端不执行动画，首屏骨架会「静止」100ms 左右才开始脉冲 —— 若对感知加载速度敏感，可在
useEffect中动态添加 class，或用setTimeout(() => setLoaded(true), 0)触发重绘
替代方案：什么时候该放弃 animate-pulse
当骨架需要「波纹扫掠感」（比如 Ant Design 风格）或「多区块异步闪烁」时，animate-pulse 就力不从心了。它的 keyframes 是均匀缩放透明度，没法模拟光带移动。
- 真需要扫掠效果，得手写 CSS：
background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent); background-size: 200% 100%; animation: loading 2s infinite; - 若骨架组件复用率高，建议封装成 React 组件并接受
variant参数，内部用switch分发animate-pulse或自定义动画 - 注意：Tailwind 的
animate-pulse不支持修改频率或延迟，想调速？只能覆盖 CSS：.animate-pulse { animation-duration: 1.2s; }
