[240813 TIL] twMerge

tailwind-merge 라이브러리

import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function tailwindMerge(...inputs: ClassValue[]) {
    // clsx를 사용하여 입력된 모든 클래스네임을 결합하고,
    // 이를 twMerge에 전달하여 최종 병합된 클래스네임을 반환합니다.
    return twMerge(clsx(...inputs));
}

 

간단히 위처럼 사용할 수 있습니다.

GPT 쌤의 자세한 설명을 첨부합니다.

clsx와 twMerge를 함께 사용하여 tailwindMerge 함수를 구현하면, 이 함수는 clsx만을 사용하는 경우보다 더 강력하고 유연한 기능을 제공합니다. 각각의 역할과 이 조합이 왜 유용한지를 설명드리겠습니다.

clsx의 역할

clsx는 조건부 클래스 이름을 쉽게 결합할 수 있도록 해주는 유틸리티입니다. 여러 클래스 이름을 문자열로 결합하고, 불리언 값에 따라 조건부로 클래스를 추가하거나 제거할 수 있습니다. 예를 들어:

clsx('bg-red-500', isActive && 'text-white', 'rounded');

 

이 코드는 isActive가 true일 경우 'bg-red-500 text-white rounded'를 반환하고, isActive가 false일 경우 'bg-red-500 rounded'를 반환합니다.

twMerge의 역할

twMerge는 tailwind-merge 라이브러리에서 제공하는 함수로, Tailwind CSS 클래스들 간의 충돌을 자동으로 해결해주는 기능을 합니다. Tailwind CSS에서 동일한 속성에 대해 여러 클래스가 적용되면, 마지막 클래스가 최종적으로 적용됩니다. twMerge는 이러한 클래스 충돌을 해결해주어, 최종적으로 충돌 없는 클래스 이름을 반환합니다. 예를 들어:

twMerge('bg-red-500 bg-blue-500'); // 결과: 'bg-blue-500'

 

여기서 bg-red-500과 bg-blue-500은 동일한 속성(background-color)을 다루기 때문에, 마지막 클래스인 bg-blue-500만 유지됩니다.

tailwindMerge 함수의 결합 효과

tailwindMerge 함수는 다음과 같이 작동합니다:

1. clsx를 사용한 클래스 결합: clsx를 통해 전달된 모든 인수를 결합하여 하나의 클래스 문자열로 만듭니다. 이 과정에서 조건부 클래스를 간단하게 추가하거나 제거할 수 있습니다.
2. twMerge를 사용한 최종 클래스 병합: 결합된 클래스 문자열을 twMerge로 전달하여 Tailwind CSS 클래스들 간의 충돌을 해결합니다. 이 결과, Tailwind의 규칙에 맞게 최종적인 클래스 이름을 반환합니다.

return twMerge(clsx(...inputs));

차이점 요약

• clsx만 사용: 조건부로 클래스 이름을 결합할 수 있지만, Tailwind CSS 클래스 간의 충돌은 해결하지 못합니다.
• clsx + twMerge를 함께 사용: clsx의 조건부 클래스 결합 기능과 twMerge의 클래스 충돌 해결 기능이 결합되어, 더 유연하고 충돌 없는 클래스 이름을 생성할 수 있습니다.

예시 비교

// clsx만 사용한 경우
clsx('bg-red-500', true && 'bg-blue-500'); // 결과: 'bg-red-500 bg-blue-500'

// twMerge와 clsx를 함께 사용한 경우
tailwindMerge('bg-red-500', true && 'bg-blue-500'); // 결과: 'bg-blue-500'

 

이처럼 tailwindMerge를 사용하면, 최종적으로 Tailwind CSS의 클래스 충돌을 자동으로 해결하여 안전하게 사용할 수 있는 클래스 이름을 반환받게 됩니다. 이는 Tailwind CSS를 사용할 때 매우 유용한 기능입니다.