tailwind-merge

Merge Tailwind CSS class names without style conflicts — intelligently resolves which utility class wins when duplicates or conflicts exist.

tailwind-merge

General JS

Merge Tailwind CSS class names without style conflicts — intelligently resolves which utility class wins when duplicates or conflicts exist.

npm GitHub Docs

Fit

Bundle (gzip)

9.0 kB

28.7 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

When building Tailwind component libraries, consumers pass className overrides that conflict with the component's default styles (e.g., both p-4 and p-8). CSS class order doesn't reliably determine which wins — you need programmatic deduplication.

What It Does

twMerge resolves conflicts between Tailwind classes by understanding the utility hierarchy. p-8 wins over p-4 because they target the same property. It handles arbitrary values, modifiers (hover:, dark:), and custom Tailwind config extensions. Commonly paired with clsx via the cn utility pattern.

Installation

bash

npm install tailwind-merge clsx

Usage Example

typescript

import { twMerge } from 'tailwind-merge';
import { clsx, type ClassValue } from 'clsx';

// The standard `cn` utility used in shadcn/ui and similar:
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

// Usage
cn('px-4 py-2 bg-blue-500', 'p-8 bg-red-500');
// → 'bg-red-500 p-8' (conflicts resolved: p-8 replaces px-4/py-2, bg-red-500 replaces bg-blue-500)

Related packages

ai (Vercel AI SDK)General JS

Unified TypeScript SDK for building AI-powered apps — switch between 20+ LLM providers without rewriting code.

animejsGeneral JS

Lightweight JavaScript animation library with a tiny footprint and a powerful, expressive API.

AOSGeneral JS

An easy-to-use library that makes elements fade, slide, or zoom into view as the user scrolls down your page.

archiverGeneral JS

Streaming interface for generating ZIP and TAR archives in Node.js — create compressed archives programmatically from files, directories, and buffers.

@formkit/auto-animateGeneral JS

> Add smooth transitions to any element with a single line — zero-config animations for adds, removes, and moves.