https://github.com/t4y3/tailwindcss-skeleton-screen
Just add the class. Not by width or height, but by number of characters.
https://github.com/t4y3/tailwindcss-skeleton-screen
skeleton-screen tailwindcss
Last synced: 4 months ago
JSON representation
Just add the class. Not by width or height, but by number of characters.
- Host: GitHub
- URL: https://github.com/t4y3/tailwindcss-skeleton-screen
- Owner: t4y3
- License: mit
- Created: 2023-01-14T13:38:32.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-13T13:39:51.000Z (over 3 years ago)
- Last Synced: 2025-03-12T02:11:38.890Z (over 1 year ago)
- Topics: skeleton-screen, tailwindcss
- Language: JavaScript
- Homepage: https://play.tailwindcss.com/79IzUqCYbU
- Size: 1.06 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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]`.
```jsx
{/* Skeleton displayed only if empty */}
{text}
```
### Differences from Others
[PR for checking diff](https://github.com/t4y3/tailwindcss-skeleton-screen/pull/2/files)
### Number of characters, not Height and width
```html
```
```html
<-- 😍 -->
```
### Wrapping of long sentences is also supported
```html
```
```html
<-- 😍 -->
```
## Installation (Tailwind CSS v4)
Install from npm:
```bash
npm install -D tailwindcss-skeleton-screen
```
Add it to your Tailwind entry CSS (v4 style).
Import the package CSS (recommended)
```css
/* tailwind.css (your entry processed by Tailwind v4) */
@import "tailwindcss-skeleton-screen";
```
No tailwind.config.js setup is required for v4.
## Basic usage (v4)
- Specify only the number of characters; height follows `font-size` and `line-height`.
```html
```
Multiline example (per-line counts by slash):
```html
```
Single-line truncation:
```html
```
Utilities
| class | description |
|------------------|-------------|
| `ss-object` | Block skeleton with background color |
| `ss-text-[n]` | Text skeleton for `n` characters |
| `ss-text-[a/b]` | Per-line characters by slash (multiline) |
Notes
- Skeletons render only when the element is `:empty`.
- Combine with any text utilities; skeleton follows typography.
## Customize (v4 `@theme`)
This package exposes CSS custom properties via Tailwind v4 `@theme`:
```css
@theme {
--skeleton-color: #e5e7eb; /* default */
--skeleton-radius: .375rem; /* default (≈6px) */
}
```
Override globally:
```css
@theme {
--skeleton-color: #f3f4f6;
--skeleton-radius: .5rem;
}
```
Or locally per scope:
```css
.card { /* affects descendants */
--skeleton-color: #e2e8f0;
--skeleton-radius: .25rem;
}
```
## How it works (v4)
- The CSS entry uses `@plugin` to load the package plugin and defines `@theme` tokens.
- The plugin generates placeholder content using full‑width spaces and assigns it to `--tw-content` only when the element is `:empty`.
- The CSS applies background and radius to the pseudo element so your normal markup stays intact.
## Migration from v3
- v3 `tailwind.config.js` plugin registration is no longer needed.
- Use the v4 CSS directives (`@import` or `@plugin`) as shown above.
- Theme options moved to CSS custom properties (`@theme`).