# tailwind-merge

> Merge Tailwind CSS classes without style conflicts

Latest version **3.7.0** (published 2026-09-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install tailwind-merge
pnpm add tailwind-merge
yarn add tailwind-merge
bun add tailwind-merge
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.7.0 |
| Published | 2026-09-12 |
| First published | 2021-07-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 5686 |
| Author | Dany Castillo |
| Maintainers | dcas |
| Keywords | tailwindcss, tailwind, css, classes, className, classList, merge, conflict, override |

## Links

- npm: https://www.npmjs.com/package/tailwind-merge
- Repository: https://github.com/dcastil/tailwind-merge
- Issues: https://github.com/dcastil/tailwind-merge/issues
- Funding: https://github.com/sponsors/dcastil
- npm.io page: https://npm.io/package/tailwind-merge

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 3.7.0 (latest) — 2026-09-12
- 3.7.0-dev.7fcb814ea439b749aa18b72415b0e21837811853 (dev) — 2026-09-13
- 2.6.1 (tailwind-merge-2) — 2026-01-30
- 3.7.0-dev.b53ceaf6e9900edf8edb03f65d0e2fbf5104adfa — 2026-09-13
- 3.7.0-dev.7772b55fc92ce78758163ebdd25d40a443532280 — 2026-09-13
- 3.7.0-dev.50b1d1e9f69ac68604be38dabea94cccdc6b070a — 2026-09-13
- 3.7.0-dev.ab12ab17b7fbc861f04300973065b9f1cff9863b — 2026-09-13
- 3.7.0-dev.f9f6b2b27a47cdd6419c8072d68b41775e010248 — 2026-09-12
- 3.7.0-dev.839d0af08a5195f0f396818d280c08a7ecc6ac03 — 2026-09-12
- 3.7.0-dev.817c76503052d6d51a7a85b3acd1bbd0c5622b08 — 2026-09-12
- 3.7.0-dev.5e0a0867b25609a0c1bfcba6bbf270b33b82b31c — 2026-09-12
- 3.7.0-dev.18eafd476830918a1e40784b3a964ce33c929eff — 2026-09-12
- 3.7.0-dev.511d68a65d8fa11ae8a549b5a1d5cf4dced41101 — 2026-09-12
- 3.6.0-dev.eb2d6c70fba0e808abdce28d4ed93fca92f4ab7b — 2026-09-12
- 3.6.0-dev.a8a88a622a0514a07399ed86899489b5adcf093c — 2026-09-11
- … 459 more at https://npm.io/package/tailwind-merge/versions

## README

<!-- This file is autogenerated. If you want to change this content, please do the changes in `./docs/README.md` instead. -->

<div align="center">
    <br />
    <a href="https://github.com/dcastil/tailwind-merge">
        <img src="https://github.com/dcastil/tailwind-merge/raw/tailwind-merge@3.7.0/packages/tailwind-merge/assets/logo.svg" alt="tailwind-merge" height="150px" />
    </a>
</div>

# tailwind-merge

Utility function to efficiently merge [Tailwind CSS](https://tailwindcss.com) classes in JS without style conflicts.

```ts
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](https://github.com/dcastil/tailwind-merge/tree/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](https://bundlephobia.com/package/tailwind-merge)

## Get started

- [What is it for](https://github.com/dcastil/tailwind-merge/blob/tailwind-merge@3.7.0/packages/tailwind-merge/docs/what-is-it-for.md)
- [When and how to use it](https://github.com/dcastil/tailwind-merge/blob/tailwind-merge@3.7.0/packages/tailwind-merge/docs/when-and-how-to-use-it.md)
- [Features](https://github.com/dcastil/tailwind-merge/blob/tailwind-merge@3.7.0/packages/tailwind-merge/docs/features.md)
- [Limitations](https://github.com/dcastil/tailwind-merge/blob/tailwind-merge@3.7.0/packages/tailwind-merge/docs/limitations.md)
- [Configuration](https://github.com/dcastil/tailwind-merge/blob/tailwind-merge@3.7.0/packages/tailwind-merge/docs/configuration.md)
- [Recipes](https://github.com/dcastil/tailwind-merge/blob/tailwind-merge@3.7.0/packages/tailwind-merge/docs/recipes.md)
- [API reference](https://github.com/dcastil/tailwind-merge/blob/tailwind-merge@3.7.0/packages/tailwind-merge/docs/api-reference.md)
- [Writing plugins](https://github.com/dcastil/tailwind-merge/blob/tailwind-merge@3.7.0/packages/tailwind-merge/docs/writing-plugins.md)
- [Versioning](https://github.com/dcastil/tailwind-merge/blob/tailwind-merge@3.7.0/packages/tailwind-merge/docs/versioning.md)
- [Contributing](https://github.com/dcastil/tailwind-merge/blob/tailwind-merge@3.7.0/packages/tailwind-merge/docs/contributing.md)
- [Similar packages](https://github.com/dcastil/tailwind-merge/blob/tailwind-merge@3.7.0/packages/tailwind-merge/docs/similar-packages.md)

---
_Source: https://npm.io/package/tailwind-merge · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._