[tailwind] tailwind-merge를 사용하여 class 충돌 피하기

리액트에서 tailwindCSS를 사용하면서 컴포넌트의 스타일을 일부만 변경하려 할 때

종종 class가 중복돼서 예상하지 않은 스타일로 적용될 때가 있습니다.

 

이럴 때 중복을 피하기 위해 유용하게 사용할 수 있는
tailwind-merge라는 유용한 라이브러리가 있습니다.

| twMerge

twMerge를 사용하여 중복되는 class를 제거하고 새로운 스타일을 적용해 줄 수 있습니다.

 

먼저 예시로 props로 변경하고자 하는 스타일을 받아 적용하는 컴포넌트 하나를 만들어 보겠습니다.

interface Props {
  className: string;
}

const Input = ({ className }: Props) => {
  const inputStyle = `border rounded px-2 py-1 ${className || ''}`;
  return <input className={className} />;
}

const InputContainer = () => {
  return <Input className="p-3" />
}

여기서 원하는 결과는 input에 "p-3" 스타일이 적용되는 것이지만

CSS의 캐스케이딩(Cascading) 규칙으로 인해 "p-3" 스타일이 적용 안되고

기조에 "px-2", "py-1" 스타일이 적용이 됩니다.

 

따라서 이럴 경우 "px-2"와 "py-1"을 제거한 후 "p-3"를 적용해야 합니다.

 

이럴 때 tailwind-merge를 사용하면 간단하게 문제를 해결할 수 있습니다.

먼저 twMerge라는 함수를 tailwind-merge에서 가져오고

해당 함수의 인자로 class를 문자로 전달하면  중복이 제거된 상태로 적용됩니다.

import { twMerge } from "tailwind-merge"

interface Props {
  className: string;
}

const Input = ({ className }: Props) => {
  const inputStyle = twMerge('border rounded px-2 py-1', className);
  
  return <input className={inputStyle} />;
}

const InputContainer = () => {
  return <Input className="p-3" />
}

이런 식으로 사용하면 해당 Input 컴포넌트는 충돌 없이
"border rounded p-3" class로 스타일이 적용됩니다.

| twJoin

twJoin은 정의된 class들을 합치는 데 사용합니다.

twMerge와 다르게 중복을 처리하지는 않고, 단순히 문자열을 연결하는 역할을 합니다.

따라서 조건에 따라 class를 만들고 합치는데 유용합니다.

import { twJoin } from "tailwind-merge";

interface Props {
  disabled: boolean;
  isMuted: boolean;
}

const Component = ({ disabled, isMuted }: Props) => {
  const componentStyle = twJoin("grid w-max gap-2", disabled ? "bg-gray-200" : "bg-white", isMuted && "text-gray-600");
  
  return (
    <div className={componentStyle} />
  )  
}

이런 식으로 class들 간의 명확한 분리를 가능하게 하고,

조건부 렌더링을 통해 스타일을 적용할 수 있도록 합니다.

| 주의

마지막으로 공식 문서를 보면 tailwind-merge를 사용할 때 때로는 프로젝트의 번들 크기를 증가시킬 수 있고,

컴포넌트 사용자에게 너무 많은 자유를 줘서 유지보수가 어려워질 수 있다고 나와 있기 때문에

이를 주의하면서 사용해야 좋을 거 같습니다.

 

https://github.com/dcastil/tailwind-merge/tree/v2.3.0/docs

tailwind-merge/docs at v2.3.0 · dcastil/tailwind-merge