> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/pjt-prepare/publish-your-docs/store-front-framewok-next.js/02./3.-tailwind-merge-+-clsx.md).

# 3. Tailwind-merge + clsx

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

***

## 설치

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

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

{% code title="설치 (pnpm)" %}

```bash
pnpm add tailwind-merge clsx
```

{% endcode %}

## 사용

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

{% code title="src/lib/common/ui/utils.ts" %}

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

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

{% endcode %}

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

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

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