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: about 1 month 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 (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-02-13T13:39:51.000Z (almost 2 years ago)
• Last Synced: 2024-09-29T23:23:05.925Z (about 2 months 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.

![](.github/main.png)

## 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

![](.github/diff_others.png)

[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

Install the plugin from npm:

```shell

npm install -D tailwindcss-skeleton-screen

```

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

```js

/** @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.

| 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 (/)". |