animate-pulse 应加在最外层包裹骨架元素的容器上，而非每个子元素；需彻底移除类名防ios safari失焦；尺寸用比例和语义化高度，圆角与颜色需符合视觉一致性。
直接用 animate-pulse 就能起效，但加错位置、没清理、嵌套过深，会导致动画卡顿、失焦或根本不动。
animate-pulse 应该加在哪个容器上
加在最外层包裹骨架元素的容器上，不是每个 bg-gray-200 子元素都加。这样所有子占位块会同步脉动，CSS 重绘次数更少，性能更好。
- ✅ 正确：
<div class="animate-pulse"> <div class="bg-gray-200 h-4"></div> <div class="bg-gray-200 h-3"></div> </div> - ❌ 错误：给每个
bg-gray-200都加animate-pulse—— 动画不同步，且触发多次重绘 - ⚠️ 注意：如果骨架屏本身是某个带
transition-all或group的父容器子元素，动画可能被中断；建议改用独立状态类（如loading），再配合group-[.loading]:animate-pulse
iOS Safari 上 animate-pulse 导致 input 失焦怎么办
这是真实存在的兼容性问题：iOS Safari 15.4–16.3 中，animate-pulse 会让 <input> 焦点意外丢失，或页面滚动卡顿。
- 必须在加载完成时彻底移除
animate-pulse类，不能只靠hidden或opacity-0隐藏 - 推荐写法：
el.className = el.className.replace('animate-pulse', '').trim()（Vue/React 中同理，用响应式状态控制类名全量替换） - SSR 场景下服务端不执行动画，首屏骨架没问题；但 hydrate 后若未及时清理，客户端仍会复现该问题
骨架屏尺寸和圆角为什么不能随便写死
固定像素值（如 h-5、w-48、无 rounded）会让骨架屏脱离真实内容节奏，破坏视觉一致性。
- 高度优先用
h-4/h-3：Tailwind 默认h-4≈ 1rem，与常规文本行高对齐，过渡自然 - 宽度用比例类：
w-3/4、w-1/2比w-48更适配响应式，避免小屏溢出或大屏留白 - 必须加
rounded（或rounded-md等）：硬边骨架是反直觉的，用户潜意识会认为“这不是 UI 的一部分” - 颜色别用纯灰：
bg-gray-200是安全选择；bg-primary/10可用于品牌化骨架，但需确保对比度足够
真正难的不是加动画，而是加载完成那一刻——类名是否被干净移除、焦点是否保留在原输入框、动画是否在 SSR/hydrate 边界上保持一致。这些细节不处理，骨架屏反而会成为体验断点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
