Tailwind Merge

Tailwind Merge

Tailwind를 사용할 때 기본적으로 정의된 클래스와 prop으로 전달받은 클래스가 중복될 경우,
Tailwind의 CSS 클래스는 후순위에 있는 클래스가 우선 적용된다.
하지만 클래스 문자열을 단순히 병합하면, 코드가 복잡해지거나 실수로 인해 의도한 스타일이 제대로 적용되지 않을 수 있다.

이를 해결하기 위해 tailwind-merge와 같은 라이브러리를 사용한다.
tailwind-merge는 중복된 Tailwind 클래스 중에서 우선순위에 따라 올바른 클래스를 자동으로 선택해 주며,
이를 통해 prop으로 전달된 클래스가 기본 클래스를 override할 수 있도록 보장한다.

설치

npm install tailwind-merge

yarn add tailwind-merge

pnpm add tailwind-merge

사용하기

import { twMerge } from 'tailwind-merge';

const Button = ({ className }) => {
  const baseClasses = "bg-blue-500 text-white";
  return <button className={twMerge(baseClasses, className)}>Click Me</button>;
};

// 사용 예시
<Button className="bg-red-500" />

위 코드에서 className으로 전달된 bg-red-500이 기본 클래스의 bg-blue-500을 override하여 버튼의 배경색이 빨간색으로 설정된다.