@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

# 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

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

# Install dependencies
npm install

# Build
npm run build

# The package will auto-build before publishing
npm publish

License

MIT