Tailwind CSS—骨架屏生成器

• CSS技巧与案例详解
• vue2与vue3技巧合集
• VueUse源码解读

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

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

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

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

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

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

如何使用 Tailwind Skeleton Generator

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

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

原始代码（有数据）：

    
    
    
    
    
Teenage Programmer
    
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.

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

看看我得到了什么：

生成的代码：

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

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

我的最终想法

Tailwind Skeleton Generator 确实节省了我大量的时间，我强烈推荐给所有使用 Tailwind CSS 的开发者。

它是一个简单的工具，但影响巨大。所以，如果你还没有尝试过，我建议你试试看。你会惊讶于它的简便性！

首发于公众号 大迁世界，欢迎关注。 每周一篇实用的前端文章 ️ 分享值得关注的开发工具 ❓ 有疑问？我来回答

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。