【React】Tailwindで美しいスケルトンを作りたい

Shadcn/uiのスケルトンが微妙だったので改良してみました。
Tailwindの環境さえあればどこでも再現できると思います！

components/skeleton.tsx

import { cn } from "@/lib/utils";

function Skeleton({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn(
        "relative bg-gray-100 overflow-hidden before:content-[''] before:absolute before:w-full before:h-full before:bg-gradient-to-r before:from-transparent before:via-gray-300 before:to-transparent before:animate-ltr-loop",
        className
      )}
      {...props}
    />
  );
}

export { Skeleton };

cn関数はShadcn/uiについてくるやつです。
ない場合以下のコードで簡単に自作できます。

npm i clsx tailwind-merge

lib/utils.ts

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

tailwind.config.ts

// ...
extend: {
  // ...
  animation: {
    "ltr-loop": "ltr 2s ease infinite",
  },
  keyframes: {
    ltr: {
      from: { transform: "translateX(-100%)" },
      to: { transform: "translateX(100%)" },
    },
  },
}