tailwind-merge

tailwind-merge

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.1 (if you use Tailwind v3, use tailwind-merge v2.6.0)
• Works in all modern browsers and maintained Node versions
• Fully typed
• Check bundle size on Bundlephobia

Get started

• What is it for
• When and how to use it
• Features
• Limitations
• Configuration
• Recipes
• API reference
• Writing plugins
• Versioning
• Contributing
• Similar packages

Similar packages

Other packages similar to tailwind-merge

classnames

The classnames package is a popular utility for conditionally joining class names together. It's not Tailwind-specific, but it's often used in projects to manage dynamic class strings. Unlike tailwind-merge, it does not deduplicate or resolve conflicts specific to Tailwind CSS.

clsx

clsx is an alternative to classnames with a similar API and is used for constructing class strings conditionally. Like classnames, it does not offer Tailwind-specific deduplication or conflict resolution.