Tailwind CSS 활용 - Clxs

 

 

 

---

 

clsx 라이브러리

clsx는 조건부로 className 문자열을 생성하는 작은(239B) 유틸리티입니다.

기존 classnames 라이브러리보다 더 작고 빠르며, 같은 기능을 제공하는 대체제입니다.

 

 

 

 

---

설치 및 사용법

 

[ 설치 ]

npm install --save clsx

 

 

 

[ 사용법 ]

 

✅ 기본 사용법 (문자열 조합)

import clsx from 'clsx';

// 여러 개의 class를 조건부로 추가
clsx('foo', true && 'bar', 'baz'); 
// 결과: 'foo bar baz'

 

 

✅ 객체를 이용한 class 조건 추가

clsx({ foo: true, bar: false, baz: true });
// 결과: 'foo baz' (false 값은 무시됨)

 

 

 

✅ 배열을 사용한 class 조합

clsx(['foo', 0, false, 'bar']); 
// 결과: 'foo bar'

 

clsx(['foo'], ['', 0, false, 'bar'], [['baz', [['hello'], 'there']]]); 
// 결과: 'foo bar baz hello there'

 

 

 

✅ 모든 타입 혼합 사용 (객체, 배열, 문자열)

clsx('foo', [1 && 'bar', { baz: false, bat: null }, ['hello', ['world']]], 'cya');
// 결과: 'foo bar hello world cya'

 

 

 

 

---

 

 

 

clsx 쓰는 이유

 

✅ 가독성 증가

✅ 조건부 class 적용을 쉽게 할 수 있음

✅ Falsy 값 (false, null, undefined, 0, NaN, "") 자동 무시

✅ Tailwind CSS와 함께 사용하기 좋음

 

import clsx from 'clsx';

const Button = ({ isActive }: { isActive: boolean }) => {
  return (
    <button className={clsx('px-4 py-2 rounded', isActive && 'bg-blue-500 text-white')}>
      클릭
    </button>
  );
};

 

위 예제에서 isActive가 true일 때만 "bg-blue-500 text-white"가 추가됩니다.

 

 

 

 

---

 

 

 

clsx/lite

 

✅ VS Code 자동 완성 설정

 

clsx를 Tailwind와 함께 사용하면 자동 완성이 정상적으로 작동하지 않을 수 있음

👉 해결 방법: clsx/lite 사용

import clsx from 'clsx/lite';

// string만 지원 (객체, 배열 사용 불가)
clsx('text-base', true && 'text-primary', 'font-bold'); 
// 결과: 'text-base text-primary font-bold'

 

 

[ clsx 버전별 차이점 ]

clsx	239B	문자열, 객체, 배열	모든 기능 지원
clsx/lite	140B	문자열만 지원	객체 및 배열 무시

버전크기 (gzip)지원 기능특징

 

 

[ clsx vs classnames 비교 ]

classnames	500B+	느림	오래된 라이브러리
clsx	239B	빠름	더 작고 빠름

라이브러리크기 (gzip)성능특징

 

 

 

✅ 결론:

classnames 대신 clsx를 사용하면 더 가볍고 빠르며 유지보수하기 쉬움! 🚀