@konstantinlindner/cn

> A tiny utility to merge className strings with Tailwind CSS support. The new left-pad! 🎉

A minimal, zero-config utility that combines clsx and tailwind-merge into a single function for managing conditional and Tailwind CSS classes.

Installation

``bash


Using pnpm

pnpm add @konstantinlindner/cn clsx tailwind-merge

Using npm

npm install @konstantinlindner/cn clsx tailwind-merge

Using yarn

yarn add @konstantinlindner/cn clsx tailwind-merge
`

Usage

`ts
import { cn } from '@konstantinlindner/cn'

// Basic usage
cn('px-2 py-1', 'bg-blue-500') // 'px-2 py-1 bg-blue-500'

// Conditional classes
cn('px-2', isActive && 'bg-blue-500', 'px-4') // 'bg-blue-500 px-4' (px-2 and px-4 merged)

// With objects
cn({ 'bg-blue-500': isActive, 'text-white': true }) // 'bg-blue-500 text-white'

// Tailwind class deduplication
cn('px-2 py-1', 'px-4') // 'py-1 px-4' (px-2 removed, px-4 wins)

// With arrays
cn(['px-2', 'py-1'], 'bg-blue-500') // 'px-2 py-1 bg-blue-500'

// Handles null/undefined gracefully
cn('px-2', null, undefined, false && 'bg-red', 'py-1') // 'px-2 py-1'
`

Why?

This is a common pattern in React + Tailwind projects. Instead of copying this utility function into every project, why not make it a package? It's the new left-pad! 😆

Development

`bash


Install dependencies

npm install

Build

npm run build

The package will auto-build before publishing

npm publish
``

License

MIT