Tailwind CSS 骨架屏加载

相信大家在刷各种 App 或查看大厂官网时都见过这种效果：在内容还没完全加载出来前，页面会先显示一堆会闪烁的灰色（或浅绿色）方块。这就是骨架屏加载动画。

骨架屏效果

Tailwind CSS 骨架屏原理

在 Tailwind CSS 中，实现骨架屏加载的核心逻辑非常简单：用占位色块模拟布局，并加上闪烁动画。其中，我们需要配合使用以下 2 组类名：

1. 开启闪烁动画

animate-pulse：这是骨架屏的灵魂。它会让元素产生一种平滑的 “淡入淡出” 循环效果，来模拟数据正在读取的状态。

2. 绘制占位色块

bg-emerald-100 或 bg-slate-200：用于绘制底色块（灰色最通用，你也可以像示例一样使用符合品牌主色调的浅色）。
配合 rounded-full 或 rounded-xl 来模拟头像和卡片的形状。

Tailwind CSS 骨架屏示例

接下来，我们通过一个简单的例子来讲解一下如何使用 Tailwind CSS 来实现骨架屏加载动画。

示例：绿叶风的骨架屏

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="flex items-center justify-center min-h-screen p-10">
    <div class="w-full max-w-sm p-6 bg-white rounded-3xl shadow-sm border border-emerald-100">
        <div class="animate-pulse flex flex-col">
            <div class="w-full h-40 bg-emerald-100 rounded-2xl mb-6"></div>
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 bg-emerald-200 rounded-full shrink-0"></div>
                
                <div class="flex-1">
                    <div class="w-3/4 h-4 bg-emerald-200 rounded mb-2"></div>
                    <div class="w-1/2 h-3 bg-emerald-100 rounded"></div>
                </div>
            </div>
            <div class="w-full h-10 mt-8 bg-emerald-100 rounded-xl"></div>
        </div>
    </div>
</body>
</html>

页面效果如下图所示。

分析：

想要使用 Tailwind CSS 实现骨架屏的 “高级加载感”，核心要点在于：

分块模拟：我们并没有使用一个大方块代替所有内容，而是分别使用圆角矩形模拟 “图片”、圆形模拟 “头像”、长条模拟 “文字”。这样用户一眼就能看出这里即将加载一个课程卡片。
颜色分级：我们混合使用了 bg-emerald-100 和 bg-emerald-200。深浅交替的色块能增加骨架屏的层次感，使其看起来不那么死板。
animate-pulse：最外层的容器加上这个类名后，内部所有的占位色块都会同步开始闪烁，视觉效果非常统一。

常见问题

1. 为什么我的骨架屏动画看起来很生硬呢？

如果发现动画闪烁太快，或者想要自定义颜色，我们可以使用 Tailwind CSS v4 提供的 @theme 来微调关键帧。不过对于 90% 的场景，官方默认的 animate-pulse 已经是经过专业设计的。

2. 骨架屏需要一直显示吗？

当然不是。在实际项目开发中（如 Vue 或 React），我们会定义一个 isLoading 状态。当数据还没返回时，会显示骨架屏代码。但一旦数据加载成功，就会通过条件渲染来切换成真实的 HTML 结构。