Tailwind CSS—骨架屏生成器
作者：dev
Tailwind Skeleton Generator 確實節省了我大量的時間，我強烈推薦給所有使用 Tailwind CSS 的開發者。它是一個簡單的工具，但影響巨大。所以，如果你還沒有嘗試過，我建議你試試看。你會驚訝于它的簡便性！
使用 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 中，我得到了預期的效果：
骨架加載器作為占位符，直到內容加載完成，并為我的用戶帶來了流暢的體驗。
最終想法
Tailwind Skeleton Generator 確實節省了我大量的時間，我強烈推薦給所有使用 Tailwind CSS 的開發者。
它是一個簡單的工具，但影響巨大。所以，如果你還沒有嘗試過，我建議你試試看。你會驚訝于它的簡便性！
責任編輯：武曉燕
來源：
大遷世界
