3. tailwind-merge + clsx

설치

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

두 가지 패키지 설치

$ pnpm add tailwind-merge clsx

 

사용

src/lib/utils.ts  폴더와 파일을 생성 (이 경로를 추천 - Next.js 공식 github)

다음 코드를 입력

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/utils";

 

 

더 자세한 사용법은 03. 퍼블 가이드를 참조