> 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/developer-guide-en/pjt-prepare/publish-your-docs/store-front-framework-next.js/02.-coding-guide-and-essential-packages/3.-tailwind-merge-+-clsx.md).

# 3. Tailwind-merge + clsx

This document guides you through installing and using tailwind-merge and clsx, packages that are essential for implementing composable commerce.

***

## Installation

This is the most essential package for realizing composable commerce.

Install the two packages.

{% code title="Installation (pnpm)" %}

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

{% endcode %}

## Usage

Create the src/lib/common/ui/utils.ts folder and file (based on the X2BEE project structure), and enter the following code.

{% 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 %}

When using it in another component, import it.

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

For more detailed usage, refer to 03. Publishing Guide - 3. Button variants.