3. Tailwind-merge + clsx

이 문서는 Composable commerce를 구현하는 데 필수적인 패키지인 tailwind-merge와 clsx의 설치와 사용법을 안내합니다.

---

설치

Composable commerce를 실현하는 가장 핵심적인 패키지입니다.

두 가지 패키지 설치합니다.

설치 (pnpm)

pnpm add tailwind-merge clsx

사용

src/lib/common/ui/utils.ts 폴더와 파일을 생성 (X2BEE 프로젝트 구조 기준) 하고, 다음 코드를 입력합니다.

src/lib/common/ui/utils.ts

import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

다른 component에서 사용시 import 합니다.

import { cn } from "@/lib/common/ui/utils"

더 자세한 사용법은 03. 퍼블 가이드 - 3. Button variants를 참조합니다.