tailwindcss-skeleton-screen

Just add the class. Not by width or height, but by number of characters.

Concept

As close as possible to normal markup

Skeleton display is performed only when there are no children.
Just add the class of ss-text-[n].

{/* Skeleton displayed only if empty */}
<p className="text-base text-gray-600 ss-text-[71]">{text}</p>

Differences from Others

PR for checking diff

Number of characters, not Height and width

<!-- ❌ -->
<div class="h-4 w-full bg-gray-200"></div>

<-- 😍 -->
<p class="ss-text-[24]"></p>

Wrapping of long sentences is also supported

<!-- ❌ -->
<div class="h-4 max-w-[360px] bg-gray-200 mb-2.5"></div>
<div class="h-4 max-w-[360px] bg-gray-200 mb-2.5"></div>
<div class="h-4 max-w-[360px] bg-gray-200 mb-2.5"></div>
<div class="h-4 max-w-[80px] bg-gray-200"></div>

<-- 😍 -->
<p class="text-base text-gray-600 ss-text-[71]"></p>

Installation

Install the plugin from npm:

npm install -D tailwindcss-skeleton-screen

Then add the plugin to your tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      skeletonScreen: {
        color: '#d0d0d0', // optional
        borderRadius: "4px" // optional
      }
    }
  },
  plugins: [
    require('tailwindcss-skeleton-screen')
  ]
};

Basic usage

• Only the number of characters is specified.
• The height can be changed by font-size and light-height, so there is no need to specify it for skeleton.