clsx, tailwind-merge ???

팀 프로젝트에서 공통 컴포넌트를 구현하려고 하던 도중 팀원이 clsx와 tailwind-merge를 사용하여 Tailwind CSS의 클래스 조합을 효율적으로 관리를 해보자고 제안하였습니다.

(저는 아직 배움이 부족한 단계라.. 일단 오케이!!! 하고 뒤늦게 찾아봄)

clsx

clsx는 클래스 이름을 조건부로 설정하거나 동적으로 조합하는 데 사용되는 유틸리티 라이브러리입니다.

주요 특징
문자열, 객체, 배열 형태로 전달된 클래스 이름을 깔끔하게 병합.
false, null, undefined와 같은 값은 무시.
조건부 클래스 설정에 유용.

import clsx from 'clsx';

const isActive = true;
const isDisabled = false;

const className = clsx(
  'base-class',
  { 'active-class': isActive, 'disabled-class': isDisabled },
  'extra-class'
);
// 결과: 'base-class active-class extra-class'

---

tailwind-merge

tailwind-merge는 Tailwind CSS 클래스 간의 우선순위를 처리하고, 중복된 클래스 이름을 자동으로 병합하는 유틸리티 라이브러리입니다.

주요 특징
Tailwind의 유틸리티 클래스 체계를 이해하고, 우선순위 규칙에 따라 중복 클래스를 병합.
예를 들어, bg-red-500 bg-blue-500과 같은 경우, 마지막에 작성된 bg-blue-500이 남음.

import { twMerge } from 'tailwind-merge';

const className = twMerge('bg-red-500 text-white', 'bg-blue-500 px-4');
// 결과: 'bg-blue-500 text-white px-4'

---

cn (사용자 정의 함수)

cn은 보통 clsx와 tailwind-merge를 결합하여 사용하는 사용자 정의 함수입니다.
두 라이브러리의 장점을 결합해 조건부 클래스 설정과 중복 클래스 병합을 한 번에 처리.

import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));

const isPrimary = true;
const isLarge = false;

const className = cn(
  'base-class',
  { 'primary-class': isPrimary, 'large-class': isLarge },
  'text-red-500 text-blue-500'
);
// 결과: 'base-class primary-class text-blue-500'

---

적용 예시

cn 사용자 정의 함수를 사용하기 위해 유틸 폴더에 이동시켰습니다.

import React from 'react';
import { cn } from './utils'; // 위에서 정의한 cn 함수 경로

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'sm' | 'md' | 'lg';
}

export const Button: React.FC<ButtonProps> = ({
  children,
  variant = 'primary',
  size = 'md',
  className,
  ...props
}) => {
  const baseStyles = 'inline-flex items-center justify-center font-medium rounded';
  const variantStyles = {
    primary: 'bg-blue-500 text-white hover:bg-blue-600',
    secondary: 'bg-gray-200 text-gray-700 hover:bg-gray-300',
    danger: 'bg-red-500 text-white hover:bg-red-600',
  };
  const sizeStyles = {
    sm: 'px-2 py-1 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg',
  };

  return (
    <button
      className={cn(baseStyles, variantStyles[variant], sizeStyles[size], className)}
      {...props}
    >
      {children}
    </button>
  );
};

import React from 'react';
import { Button } from './Button';

const App = () => {
  return (
    <div className="space-y-4 p-6">
      <Button variant="primary" size="sm">
        Small Primary Button
      </Button>
      <Button variant="secondary" size="md" className="shadow-lg">
        Medium Secondary Button
      </Button>
      <Button variant="danger" size="lg">
        Large Danger Button
      </Button>
    </div>
  );
};

export default App;

해당 링크를 토대로 공부를 하였습니다.
CVA, Clsx, and TailwindMerge Combo Guide
Tailwind CSS 잘 활용하기