当前位置：首页 > article >正文

Tailwind CSS—骨架屏生成器

article 2025/1/27 12:38:16

使用 Tailwind CSS 快速创建现代化的骨架屏，只需要这个简单的工具。

我一直在寻找方法，让我的网站更加引人入胜和用户友好。

其中最简单而又最有效的方法之一，就是加入骨架加载器——那些灰色的、闪烁的方框，在内容加载时显示。它们帮助用户获得更流畅的体验，让他们觉得网站加载速度比实际快。

这些骨架加载器是一个不错的补充，但从零开始设计它们却很费时间。

直到我遇到了 Tailwind Skeleton Generator，必须说，这真是一个值得开发者拥有的工具！只需点击一下，我就能用 Tailwind CSS 生成干净、可自定义的骨架屏。

我喜欢这个工具的地方就在于它的简洁——你无需深入研究 CSS 或 JavaScript。

如何使用 Tailwind Skeleton Generator

以下是我在最近的一个项目中使用 Tailwind Skeleton Generator 的简单示例：

假设我有一个卡片组件，用于显示用户的个人资料，包括照片、姓名和简介。为了避免在内容加载时只是显示一个空白页面，我使用骨架加载器显示占位内容：

原始代码（有数据）：

<div class="space-y-4 p-6 max-w-sm mx-auto">
    <!-- 图片的骨架加载器 -->
    <img src="https://yt3.googleusercontent.com/oGB27ubPR1zD7eqatjSUZRnMqdr1WAV6g3wC39d-G0hFTIrkzq0FK5_Z9sgAGQsTHEzOOgSw=s160-c-k-c0x00ffffff-no-rj" class="h-24 w-24 rounded-full"/>
    
    <!-- 文本的骨架加载器 -->
    <div class="h-6 w-3/4">Teenage Programmer</div>
    <div class="h-4 w-full">Hey, I'm Developing unique projects and trying to make web development learning easy for freshy users in this field. Fast track your development career with me. Hope you'll love my creativity.</div>
</div>

接下来，我将相同的源代码粘贴到 Tailwind Skeleton Generator 中。

看看我得到了什么：

生成的代码：

<div class="space-y-4 p-6 max-w-sm mx-auto animate-pulse">
    <!-- 图片的骨架加载器 -->
    <div class="h-24 w-24 rounded-full bg-gray-200"></div>
    
    <!-- 文本的骨架加载器 -->
    <div class="h-6 w-3/4 bg-gray-200 rounded"></div>
    <div class="h-4 w-full bg-gray-200 rounded"></div>
</div>

将这个生成的代码复制到我的 Tailwind Play 中，我得到了预期的效果：

骨架加载器作为占位符，直到内容加载完成，并为我的用户带来了流畅的体验。