[Tailwind CSS] 16. clsx 사용하기

 

tailwind CSS 로고

 

 

요약  

  1. 학습내용 : clsx 사용하기

---

상세
  1. 학습내용 : clsx 사용하기

 

◼︎ clsx 정의

- clsx는 경량 className 유틸리티이다.

- 조건부로 클래스 문자열을 합치거나, fasly 값(false, null, undefined, 0, "")을 자동으로 걸러주는 경량 라이브러리이다.

 

◼︎ clsx 특징

- clsx는 제로 의존(zero-dependency), 번들 크기 약 200B(최소화시)

 

◼︎ clsx 설치

# npm
npm install clsx

 

◼︎ clsx 기본 사용법

import clsx from 'clsx';

function Button({ isPrimary, isDisabled }: { isPrimary: boolean; isDisabled?: boolean }) {
  return (
    <button
      className={clsx('px-4 py-2 rounded',
        isPrimary ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-800',
        isDisabled && 'opacity-50 cursor-not-allowed'
      )}
      disabled={isDisabled}
    >
      클릭
    </button>
  );
}

- clsx('px-4 py-2 rounded', ~) => 괄호 내 유틸리티는 기본적으로 수행 O

- 가변클래스 (isPrimary)        => true: 첫 번째 그룹 / false: 두 번째 그룹 수행

- Falsy 필터링 (isDisabled)    => 'opacity-50~' 자동으로 무시, true면 수행