Blog

서론#

Tailwind CSS를 사용하면서
처음에는 className 안에 클래스를 그대로 나열하는 방식이 가장 단순해 보였다.

<div className="rounded-md bg-white p-4" />

하지만 상태에 따라 스타일이 바뀌기 시작하면서
className 안의 조건이 점점 늘어났다.

<div className={isActive ? "bg-blue-500 p-4 text-white" : "bg-gray-200 p-4 text-black"} />

코드는 동작했지만,
이 방식이 계속 늘어나도 괜찮은지 의문이 들었다.

이 글은
Tailwind를 사용할 때 clsx나 classnames를
언제, 왜 쓰게 되는지를 정리한 기록이다.

조건부 클래스가 늘어나는 순간#

Tailwind는
클래스 조합으로 스타일을 표현한다.

그 자체로는 단순하지만,
상태가 추가되면 문제가 드러난다.

<div
  className={`p-4 rounded-md ${
    isActive ? "bg-blue-500 text-white" : "bg-gray-200 text-black"
  }`}
>

여기에 disabled, error, size 같은 조건이 더해지면
문자열 템플릿 안은 빠르게 복잡해진다.

이 시점에서의 문제는
“Tailwind가 어렵다”기보다는
조건을 표현하는 방식이 코드 가독성을 해치기 시작한다는 점이다.

문자열로 조건을 처리하는 한계#

조건부 클래스를
순수 문자열로 처리하면 다음과 같은 문제가 생긴다.

• 조건이 늘어날수록 가독성이 급격히 떨어짐
• 클래스 조합을 한눈에 파악하기 어려움
• 실수로 공백이나 클래스를 빠뜨리기 쉬움

className={`${base} ${isActive && active} ${isDisabled && disabled}`}

이 코드는 익숙해 보이지만,
조건이 늘어날수록 의미를 추적하기가 쉽지 않다.

clsx / classnames는 무엇을 해결하는가#

clsx와 classnames는
조건에 따라 클래스를 안전하게 합쳐주는 유틸리티다.

import clsx from "clsx";

<div
  className={clsx(
    "rounded-md p-4",
    isActive && "bg-blue-500 text-white",
    isDisabled && "opacity-50"
  )}
/>;

여기서 중요한 점은
이 라이브러리들이 Tailwind 전용 도구가 아니라는 것이다.

다만 Tailwind처럼
클래스 조합이 많은 환경에서
효과가 명확하게 드러난다.

언제 굳이 써야 할까?#

항상 clsx를 써야 하는 것은 아니다.

다음과 같은 경우라면
굳이 사용할 필요가 없다.

<div className="rounded-md bg-white p-4" />

반대로, 아래와 같은 시점이 오면
도입을 고민할 만하다.

• 조건부 클래스가 2개 이상 존재할 때
• 상태에 따라 클래스 묶음이 바뀔 때
• JSX 안의 문자열이 읽기 어려워질 때

즉, 기준은 “규칙”이 아니라
읽는 데 부담이 생겼는지 여부다.

classnames와 clsx의 차이#

두 라이브러리는 목적이 거의 동일하다.

• classnames
  • 비교적 오래된 라이브러리
  • 객체 기반 문법을 많이 사용
• clsx
  • 더 가볍고 단순한 API
  • 조건부 표현에 집중된 문법

classnames("base", { active: isActive });
clsx("base", isActive && "active");

기능 차이보다는
취향과 코드 스타일의 문제에 가깝다.

Tailwind와 함께 쓸 때의 장점#

Tailwind와 clsx를 함께 쓰면
클래스 조합의 의도가 비교적 명확해진다.

className={clsx(
  "px-4 py-2 rounded-md",
  isPrimary && "bg-blue-500 text-white",
  isSecondary && "bg-gray-200 text-black"
)}

이 코드는
“기본 스타일 + 상태별 변형” 구조를
눈으로 바로 파악할 수 있다.

정리#

clsx나 classnames는
반드시 써야 하는 도구는 아니다.

하지만 Tailwind를 사용하다 보면
조건부 클래스가 자연스럽게 늘어나고,
그 시점에서 이 도구들은
코드를 정리하기 위한 선택지가 된다.

중요한 것은 라이브러리 자체가 아니라,
조건과 스타일의 관계를 코드에서 어떻게 드러내느냐다.

그래서 clsx / classnames는
Tailwind를 쓰다 보면
언젠가는 한 번쯤 필요해지는 도구라고 느꼈다.

npm 바로가기#

• clsx
• classnames