This document outlines the steps to create Skeleton component styled withTailwind CSS and using some npm dependency libraries.
Node.js and npm installed on your machine.Tailwind CSS installed in your project.CVA(class-variance-authority) is a utility for managing CSS class names based on various conditions.clsx is a tiny utility for constructing className strings conditionally.1// tailwind.config.js
2module.exports = {
3 ...
4 theme: {
5 ...
6 extend: {
7 ...
8 keyframes: {
9 skeleton: {
10 from: { transform: "translateX(-100%)" },
11 to: { transform: "translateX(100%)" },
12 },
13 },
14 animation: {
15 skeleton: "skeleton 2s infinite",
16 },
17 },
18 },
19 plugins: [require("tailwindcss-animate")]
20};
211// skeleton.component.tsx
2import clsx from "clsx";
3
4export interface SkeletonProps {
5 shape?: "square" | "circle";
6 width?: string | number;
7 height?: string | number;
8 className?: string;
9}
10
11const Skeleton: React.FC<SkeletonProps> = ({
12 shape = "square",
13 width = "100%",
14 height = "auto",
15 className,
16}) => {
17 return (
18 <div
19 className={clsx(
20 "relative flex-shrink-0 flex-grow-0 overflow-hidden bg-neutral-300 shadow-md dark:bg-neutral-500",
21 {
22 "aspect-square rounded-full": shape === "circle",
23 "rounded-md": shape === "square",
24 },
25 className,
26 )}
27 style={{ width, height }}
28 >
29 <div
30 className="animate-skeleton absolute inset-0"
31 style={{
32 background: `linear-gradient(
33 90deg,
34 rgba(255, 255, 255, 0) 0,
35 rgba(255, 255, 255, 0) 25%,
36 rgba(255, 255, 255, 0.3) 50%,
37 rgba(255, 255, 255, 0) 75%,
38 rgba(255, 255, 255, 0)
39 )`,
40 }}
41 />
42 </div>
43 );
44};
45
46export default Skeleton;
47