리액트에서 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 (

)

}

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

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

| 주의

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

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

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

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

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

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