tailwindcss-skeleton-screen

Tailwindcss plugin to make skeleton screen.

Live Demo

Installation

1# Using npm
2npm install -D @gradin/tailwindcss-skeleton-screen
3
4# Using Yarn
5yarn add -D @gradin/tailwindcss-skeleton-screen

Then add the plugin to tailwind.config.js file

1module.exports = {
2  theme: {
3    // ...
4  },
5
6  plugins: [
7    require('@gradin/tailwindcss-skeleton-screen'),
8  ],
9}

Configuration

You can change the color and animation via theme settings.

The object keys will be appended to the end of the .loading class. The base .loading class can be configured by DEFAULT key.

1module.exports = {

2  theme: {

3    skeletonScreen: {

4      DEFAULT: { // .loading

5        baseColor: '#c7c7c7',

6        movingColor: 'linear-gradient(to right, transparent 0%, #E8E8E8 50%, transparent 100%)',

7        duration: '1s',

8        timing: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
9      },
10      // specify another color to have multiple loading colors.

11      blue: { // .loading-blue

12        baseColor: 'blue',

13        movingColor: 'linear-gradient(to right, transparent 0%, lightblue 50%, transparent 100%)',

14        duration: '.3s',

15        timing: 'ease',
16      },
17    },
18  },
19}

Or you can use theme.extend to add another color in addition to the default.

1module.exports = {
2  theme: {
3    extend: {
4      skeletonScreen: {
5        red: { // .loading-red
6          baseColor: 'red',
7          movingColor: 'pink',
8          duration: '3s',
9          timing: 'ease',
10        },
11      },
12    },
13  },
14}

If you want to use colors from your theme. You can do it like this. Learn more about this here.

1module.exports = {
2  theme: {
3    skeletonScreen: theme => ({
4      DEFAULT: {
5        baseColor: theme('colors.gray.300'),
6        movingColor: 'linear-gradient(to right, transparent 0%, ' + theme('colors.gray.50') + ' 50%, transparent 100%)',
7        duration: '1s',
8        timing: 'ease',
9      },
10    }),
11  },
12}