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].

1{/* Skeleton displayed only if empty */}
2<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

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

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

Wrapping of long sentences is also supported

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

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

Installation

Install the plugin from npm:

1npm install -D tailwindcss-skeleton-screen

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

1/** @type {import('tailwindcss').Config} */
2module.exports = {
3  theme: {
4    extend: {
5      skeletonScreen: {
6        color: '#d0d0d0', // optional
7        borderRadius: "4px" // optional
8      }
9    }
10  },
11  plugins: [
12    require('tailwindcss-skeleton-screen')
13  ]
14};
15

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.

class
ss-object	Display skeleton with background-color
ss-text-[n]	Display skeleton for n characters
ss-text-[n/n/n]	The number of characters per line can be specified by separating each line with a "slash (/)".