Merge Tailwind CSS classes without style conflicts
Merge Tailwind CSS classes without style conflicts
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]'
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. |
No open issues yet, or sync has not completed.