cn function

cn, clx등 의 함수는 className들을 합성해주는 함수입니다.

shadcn-ui 설치 시 components.json 파일이 생성되는데,

components.json

  ...
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }

해당 파일은 tailwind css를 추가할 때 발생할 수 있는 클래스 충돌 문제를 해결해주는 역할을 합니다. 또한, cls라는 함수를 직접 만들어서 cn과 동일하게 사용하기도 합니다.

src/lib/utils.ts

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

export const cn = (...inputs: ClassValue[]) => {
  return twMerge(clsx(inputs));
};

export const cls(...classnames: string[]) => {
  return classnames.join(" ");
};