Utility function to efficiently merge Tailwind CSS classes in JS without style conflicts.
import { twMerge } from 'tailwind-merge'
twMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]')
// → 'hover:bg-dark-red p-3 bg-[#B91C1C]'- Supports Tailwind v4.0 up to v4.3 (if you use Tailwind v3, use tailwind-merge v2.6.0)
- Works in all modern browsers and maintained Node versions
- Fully typed, with published declarations compatible with TypeScript 3.8 and newer
- Check bundle size on Bundlephobia
- What is it for
- When and how to use it
- Features
- Limitations
- Configuration
- Recipes
- API reference
- Writing plugins
- Versioning
- Contributing
- Similar packages
This repository is a monorepo. The docs above belong to the tailwind-merge package — what most visitors are here for — and everything package-specific (source, docs, changelog) lives in the package directories.
| Package | Description |
|---|---|
| tailwind-merge (npm) | The library itself — see the docs above. |
| @tailwind-merge/vite | Automatic theme configuration and source-based pruning for Vite apps. No stable release yet; dev builds on npm under the dev tag. |
| @tailwind-merge/next | The same for Next.js apps, with Turbopack and webpack. No stable release yet; dev builds on npm under the dev tag. |
| @tailwind-merge/configurator | JavaScript API and CLI for generating a theme-specific merge module. Unreleased; API remains unstable. |
| @tailwind-merge/plugin-core | Shared internals of the Vite and Next.js plugins (discovery, generation, refresh). Unpublished; inlined into both plugins. |