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.Root className="loading:pointer-events-none">
  <Skel.Item style="text-lg font-medium loading:w-32 loading:h-10">
    ...
  </Skel.Item>
</Skel.Root>

loaded:

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

<Skel.Root className="loaded:bg-blue-400">
  <Skel.Item style="text-lg font-medium loaded:border-2 loaded:hover:scale-125">
    ...
  </Skel.Item>
</Skel.Root>