Tailwind CSS 无内置骨架屏组件，但可用 animate-pulse、bg-gray-200、rounded 等工具类手写；支持脉冲动画和扫光效果（需自定义 keyframes）；需注意响应式布局、尺寸对齐与平滑过渡。
Tailwind CSS 本身不提供骨架屏（skeleton screen）组件或动画类，但你可以用内置的 animate-pulse、bg-gray-200、rounded 等工具类快速手写语义化骨架结构，无需额外依赖。
用 animate-pulse 实现基础呼吸式闪烁动画
这是最轻量的骨架动画方案，适合文字块、头像、卡片占位等场景。它本质是背景色透明度周期性变化，视觉上产生“脉冲”感。
-
animate-pulse必须配合一个有明确尺寸和背景色的元素使用，否则不可见 - 默认动画时长为 2s，可通过自定义
animation-duration覆盖（如duration-700） - 不要在
button或可交互元素上直接加animate-pulse，会干扰焦点与可访问性；应包裹在div中模拟按钮形状 - 示例：
<div class="h-6 bg-gray-200 rounded animate-pulse w-3/4"></div>
组合 bg-gradient-to-r + from-transparent 模拟动态扫光效果
比 animate-pulse 更接近真实加载态——光效从左向右滑过，暗示内容正在“流入”。Tailwind 默认不带该动画，需手动补全关键帧。
- 在
tailwind.config.js的theme.extend.animation和keyframes中添加：
module.exports = {
theme: {
extend: {
animation: {
'shine': 'shine 2s infinite',
},
keyframes: {
shine: {
'0%': { 'background-position': '-200% 0' },
'100%': { 'background-position': '200% 0' },
}
}
}
}
}
<div class="h-8 bg-gradient-to-r from-transparent via-gray-200 to-transparent bg-[length:200%_100%] animate-shine rounded"></div>
bg-[length:200%_100%] 才能让渐变动起来；via-gray-200 是可见高亮区，两端 transparent 构成扫光过渡响应式骨架结构要避免固定 h-/w- 值硬编码
移动端小屏下，一个 h-48 卡片骨架可能撑满视口，破坏布局节奏。骨架应跟随容器流式缩放。
- 优先用
aspect-w-16 aspect-h-9+h-full控制图片区域比例，而非h-48 - 文字行用
h-4+max-w-[80%]模拟长度变化，比写死w-64更自然 - 复杂卡片建议用
grid或flex布局 +gap-4，让骨架间隙与真实内容一致，减少 DOM 切换时的跳动 - 切忌在骨架中使用
hidden或opacity-0配合 JS 显示真实内容——这会导致布局重排；应统一用opacity-0→opacity-100+transition-opacity平滑切换
真正难的不是画出骨架，而是让骨架的尺寸、圆角、间距、动画节奏和最终内容完全对齐。哪怕只是 rounded-lg 和 rounded-md 差一级，切换瞬间也会显得突兀。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
