npm install --save clsx
npm install tailwind-merge
npm install class-variance-authority

clsx

조건에 따라 클래스를 동적으로 추가하는 유틸리티이다. 조건부 Tailwind 클래스 적용

• 배열 방식

clsx("base-class", 조건 && "class")

import clsx from 'clsx';

const isActive = true;
const isDisabled = false;

const buttonClass = clsx(
  'px-4 py-2',
  isActive && "bg-blue-500 text-white", // isActive가 true면 적용됨
  isDisabled && "opacity-50 cursor-not-allowed" // isDisabled가 true면 적용됨
);

console.log(buttonClass);
// 'px-4 py-2 bg-blue-500 text-white'

• 객체 리터럴 방식key: value
  값이 true인 경우에만 해당 키클래스가 적용된다.

clsx("base-class", { "class": 조건 });

const buttonClass = clsx({
  "bg-blue-500 text-white": isActive,  // isActive가 true면 적용됨
  "opacity-50 cursor-not-allowed": isDisabled,  // isDisabled가 true면 적용됨
});

✔️ 장점

• undefined나 null값을 자동을 처리해준다.

twMerge

중복되거나 충될하는 Tailwind 클래스를 자동으로 병합하는 라이브러리이다. 중복되는 Tailwind 클래스 자동 병합

• 동시에 존재하면 후자의 클래스를 남긴다.
• clsx와 함께 사용 가능하다.

import { twMerge } from 'tailwind-merge';

const buttonClass = twMerge('bg-blue-500 text-white', 'bg-red-500');
// 결과: 'bg-red-500 text-white'

cva

class-variance-authority
조건에 따라 동적으로 클래스를 조합하는 데 도움을 주는 유틸리티이다. Tailwind 스타일을 쉽게 조합

• 객체 형태로 Tailwind 클래스 정의
• variants로 다양한 스타일 조합 가능하다. 이때 defaultVariants로 기본값 지정이 가능하다.

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

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

console.log(button()); 
// 'px-4 py-2 font-bold bg-blue-500 text-white text-sm'

console.log(button({ variant: 'secondary', size: 'lg' }));
// 'px-4 py-2 font-bold bg-gray-500 text-black text-lg'
 

역할 비교

함수	역할	특징
clsx	조건부 클래스 병합	여러 개의 클래스를 조건에 따라 동적으로 적용
twMerge	Tailwind 클래스 중복 제거	clsx로 합친 클래스를 최적화해 중복된 Tailwind 속성 제거
cva	클래스를 컴포넌트 스타일로 추상화	clsx와 비슷하지만, 스타일을 미리 정의한 후 사용

참고

https://velog.io/@seesaw/%ED%85%8C%EC%9D%BC%EC%9C%88%EB%93%9C%EB%A5%BC-%ED%86%B5%ED%95%9C-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%8A%A4%ED%83%80%EC%9D%BC%EB%A7%81-%EB%B0%A9%EB%B2%95