スケルトンスクリーンとは
スケルトンスクリーンは、ページの読み込み中に表示される、コンテンツの骨組みだけを表示する UI です。コンテンツが読み込まれるまでの間、ユーザーに待っていることを感じさせないために使われます。
アバターとテキスト
実際にはアニメーションします。
アバターとテキストのスケルトンスクリーンでは、アバター部分に円形のプレースホルダーを使用し、テキスト部分に矩形のプレースホルダーを配置しています。shrink-0 を用いて、フレックスアイテムが縮小されないようにします。
ブログアイテム（横）
横向きのブログアイテムでは、画像とテキストを並べて配置するスケルトンスクリーンを作成します。rounded-lg クラスを使って角丸にし、shrink-0 で画像部分が縮小されないようにしています。
ブログアイテム（縦）
縦向きのブログアイテムのスケルトンスクリーンでは、画像を上部に配置し、下にテキストプレースホルダーを並べています。このレイアウトは、ブログの一覧や記事の詳細ページに使うのに適しています。
まとめ
Tailwind CSS だけを使って、簡単にスケルトンスクリーンを実装することができます。animate-pulse クラスを使うことで、ページの読み込み中に動きのあるプレースホルダーを表示し、ユーザーにコンテンツが準備中であることを伝えることができます。JavaScript を使わずに CSS だけで実装できるため、軽量で手軽にスケルトンスクリーンを追加できます。
参考
