소개

React와 Tailwind CSS를 함께 사용할 때 클래스명을 관리하려면 몇 가지 도구가 필요하다. 대표적으로 clsx와 tailwind-merge가 있다. 이 둘을 조합해 편리한 유틸 함수를 만들 수 있다.

필요한 라이브러리

먼저 필요한 의존성을 설치한다.

npm install clsx tailwind-merge

• clsx: 조건부 클래스명 처리를 위한 유틸리티 라이브러리
• tailwind-merge: Tailwind CSS 클래스 충돌을 해결해주는 라이브러리

clsx

clsx는 다양한 형식의 조건부 클래스명을 처리할 수 있다.

// 배열, 객체, 조건부 표현식 등 다양한 입력 처리
clsx('default', { active: isActive }, ['additional', isExtra && 'extra'])

tailwind-merge

tailwind-merge는 Tailwind CSS 클래스 간의 충돌을 스마트하게 해결해주는 라이브러리다. 특히 React나 Vue 같은 컴포넌트 기반 UI 개발에서 재사용 가능한 컴포넌트를 만들 때 매우 유용하다.

예를 들어, 기본 스타일이 있는 재사용 가능한 입력 컴포넌트를 만드는 경우를 살펴보자.

// tailwind-merge 없이 구현한 경우
function Input(props) {
    const className = `border rounded px-2 py-1 ${props.className || ''}`
    return <input {...props} className={className} />
}

// 특정 상황에서 패딩을 변경하고 싶은 경우
function CustomInput(props) {
    return (
        <Input
            {...props}
            className="p-3" // 패딩만 변경하고 싶음
        />
    )
}

이 경우 결과적으로 border rounded px-2 py-1 p-3라는 클래스가 생성되지만, CSS Cascade 방식 때문에 p-3이 무시된다. 클래스의 순서와 관계없이 px-2와 py-1을 제거하지 않는 한 p-3 스타일을 적용할 수 없다.

CSS Cascade 방식에서는 같은 명시도(specificity)를 가진 스타일이 충돌할 때 CSS 파일에서 나중에 정의된 스타일이 우선적용된다. MDN Web Docs - Introducing the CSS Cascade: Cascading Order, 5. Order of appearance