Tailwind CSS

Import plugin

Add Skel UI plugin to the plugins array of your tailwind config file.

/** @type {import('tailwindcss').Config} */
 
module.exports = {
  plugins: [
    require("@skel-ui/react/tailwind")(), 
  ],
};

Variants

loading:

This variant is used to style the components while loading. Useful to define size of the skeleton and prevent pointer events.

<Skel.h1 className="text-lg font-medium loading:w-32 loading:h-10">
  ...
</Skel.h1>

loaded:

This variant is used to style the components after loading is done. Useful to define stylings like background and hover effects.

<Skel.h1 className="text-lg font-medium loaded:border-2 loaded:hover:scale-125">
  ...
</Skel.Item>