# tailwind-cn

> Wrapper to combine tailwind classes

Latest version **1.0.3** (published 2025-12-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install tailwind-cn
pnpm add tailwind-cn
yarn add tailwind-cn
bun add tailwind-cn
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2025-12-23 |
| First published | 2023-08-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 110.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Alan H |
| Maintainers | seasonalmatcha |
| Keywords | tailwindcss, clsx, tailwind-merge, css, classnames |

## Links

- npm: https://www.npmjs.com/package/tailwind-cn
- Repository: https://github.com/seasonalmatcha/tailwind-cn
- Issues: https://github.com/seasonalmatcha/tailwind-cn/issues
- npm.io page: https://npm.io/package/tailwind-cn

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 1.0.3 (latest) — 2025-12-23
- 1.0.2 — 2023-08-11
- 1.0.1 — 2023-08-10
- 1.0.0 — 2023-08-10
- 0.0.1 — 2023-08-10

## README

# Tailwind CN

A utility function built on top of [tailwind-merge](https://www.npmjs.com/package/tailwind-merge) and [clsx](https://www.npmjs.com/package/clsx) to help you merge and override tailwind classes in the same category

Support string, object, array, and conditional syntax

## Installation

```bash
npm install tailwind-cn
```

## Usage

The API is exactly the same as `clsx`

```ts
import { cn } from 'tailwind-cn';

cn('text-white', true && 'text-blue');
// => 'text-blue'

cn(['p-4', undefined, 'text-black'], ['text-white']);
// => 'p-4 text-white'

cn({ 'bg-black': true, 'text-white': false });
// => 'bg-black

cn({ border: true }, 'border-0', ['border-b']);
// => 'border-0 border-b'

// Feel free to experiments :)
```

```tsx
import type { ComponentProps } from 'react';
import { cn } from 'tailwind-cn';

function Button({ className, ...props }: ComponentProps<'button'>) {
  const baseClasses = 'text-blue-700';
  const mergedClasses = cn(baseClasses, className);

  return <button className={mergedClasses} {...props} />;
}

function MyComponent() {
  const overrideClasses = cn('text-black', ['p-4', 'border'], { rounded: true });

  return (
    <>
      <Button>Default</Button>
      <Button className="text-red-700">Override</Button>
      <Button className={overrideClasses}>More Overrides</Button>
    </>
  );
}
```

## Acknowledgement

This lib is inspired by [ByteGrad](https://blog.bytegrad.com/) who showed me how I can combine these 2 libs and [Matt Pocock](https://www.mattpocock.com/) who has been providing great resources on learning Typescript

---
_Source: https://npm.io/package/tailwind-cn · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._