cva(class-variance-authority)

cva는 class-variance-authority의 약자이며, Tailwind CSS 사용자들이 동적 클래스 조합을 깔끔하고 타입 안전하게 작성할 수 있도록 도와주는 라이브러리

주로 버튼, 뱃지, 카드 같은 컴포넌트에서 variant, size, disabled 같은 **속성(variant)**에 따라 className을 효율적으로 구성

장점

• 타입 안전
  • 잘못된 값을 넣으면 TypeScript 에러를 발생시켜줌
• 중복 제거
  • base를 기준으로 variant, size별로 추가 스타일을 입히기 때문에 중복적인 코드를 줄일 수 있음.
• 유지보수가 쉬움
  • 전체적인 스타일을 바꿀때도 base 스타일을 수정하면 되고 특정 variant나 size를 수정하기도 쉬움

설치

npm install class-variance-authority

사용 방법

import { cva } from "class-variance-authority";

const button = cva("px-4 py-2 font-semibold rounded", {
  variants: {
    variant: {
      primary: "bg-blue-500 text-white",
      secondary: "bg-gray-300 text-black",
    },
    size: {
      sm: "text-sm",
      md: "text-md",
      lg: "text-lg",
    },
  },
  defaultVariants: {
    variant: "primary",
    size: "md",
  },
});