tailwind-merge
Merge Tailwind CSS classes without style conflicts
About
Merge Tailwind CSS classes without style conflicts
What detecting tailwind-merge tells you about a site
tailwind-merge intelligently resolves conflicting Tailwind utility classes (so a later `px-4` wins over an earlier `px-2`), and its presence is a strong tell that the app builds composable, override-friendly components on top of Tailwind — the pattern shadcn/ui popularised.
Why the exact tailwind-merge version matters
tailwind-merge's conflict rules are tied to Tailwind's class set, so its major version tracks Tailwind's (v2 of the lib aligns with Tailwind v4); the exact version tells you which Tailwind generation the components assume.
tailwind-merge in a real-world stack
When you find tailwind-merge in a bundle, it rarely travels alone. clsx (frequently wrapped together as a `cn()` helper), class-variance-authority and tailwindcss.
Quick facts
npm install tailwind-mergeHow Sourcemap Explorer detects tailwind-merge
tailwind-merge ships as v3.6.0, published 2026-05-10 and carries 0 direct dependencies, 446 versions on the registry. Those exact numbers are the footprint Sourcemap Explorer matches when tailwind-merge rides inside a deployed bundle — here is how the detection works.
We catch tailwind-merge from two complementary signals: bundled source paths and the embedded package.json. Modern bundlers (webpack, Vite, esbuild, Rollup, Turbopack) preserve the original node_modules/tailwind-merge/ paths inside the JavaScript sourcemap's sources[] array — that's the canonical signal. When the matching package.json is also captured in sourcesContent[], we read the exact version field — patch number included. No regex guessing, no version inference.
- 1
Confirm the site exposes sourcemaps
In DevTools Network, check the response headers of any application script for `SourceMap` or `X-SourceMap`. Failing that, fetch the script's last 4 KB and look for a `//# sourceMappingURL=` comment — that map is where the `tailwind-merge` paths live.
- 2
Find the package in the bundle
Open DevTools → Network → reload. Click any application script and look at its sourcemap. Inside, search `sources[]` for entries matching `node_modules/tailwind-merge/` — every match confirms the package is bundled. The matching `sourcesContent[i]` for `node_modules/tailwind-merge/package.json` gives you the exact installed version.
- 3
Read the version directly from package.json
Run `jq -r '. as $m | $m.sources | to_entries[] | select(.value | endswith("node_modules/tailwind-merge/package.json")) | $m.sourcesContent[.key] | fromjson | .version' bundle.js.map`. Sourcemap Explorer automates the same query in the popup.
Major releases of tailwind-merge
When each major version first landed. Major bumps are where breaking changes live, so this timeline is the fastest way to date the tailwind-merge version a site actually ships against the ecosystem.
Recent versions
tailwind-merge README
Live mirror of the GitHub README, for reference. Updated whenever the repo's default branch changes.
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.3 (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
FAQ
What is tailwind-merge used for?
Merge Tailwind CSS classes without style conflicts
How can I tell if a website is using tailwind-merge?
Open the page in Chrome with the Sourcemap Explorer extension installed and read the Stack tab. We catch `tailwind-merge` from two complementary signals: `node_modules/tailwind-merge/` paths inside the JavaScript sourcemap, and the embedded `package.json` we read for exact-version detection. Without the extension you can do the same lookup manually in DevTools — the steps are listed in the "How Sourcemap Explorer detects" section above.
How do I find out which version of tailwind-merge a website is running?
Read it straight from the site's JavaScript sourcemap. When a build ships source maps, the bundled `tailwind-merge/package.json` carries the exact `version` string — Sourcemap Explorer extracts it in one click on the Stack tab, and you can do it by hand in DevTools by opening the `.map` file and searching for `node_modules/tailwind-merge/package.json`. That is far more reliable than inferring the version from an asset-hash or a `?ver=` query string, which is all surface-level detectors have to go on. The current npm release is 3.6.0, but real deployments frequently run an older pinned version — which is exactly why reading the bundled number matters.
What is the latest version of tailwind-merge?
3.6.0, as published on the npm registry. The "Recent versions" table on this page lists the most recent 8 releases with their release dates. Sourcemap Explorer reports the version actually bundled into a site, which can lag the latest release by months on real-world deployments.
Is tailwind-merge actively maintained?
Very actively maintained — the last release shipped within the past three months. The last published release was 2026-05-10. Source code: https://github.com/dcastil/tailwind-merge.
Where can I read more?
Project homepage: https://github.com/dcastil/tailwind-merge. Source code: https://github.com/dcastil/tailwind-merge. Published on npm: https://www.npmjs.com/package/tailwind-merge. Licensed as MIT.
Keep reading on Sourcemap Explorer
Practical guides
Detection deep dives
Detected by Sourcemap Explorer
When a bundle ships sourcemaps, we read the embedded package.json for tailwind-merge and report the precise version (the registry's latest is v3.6.0, published 2026-05-10; the bundled copy is often older). Without sourcemaps, an import / require in the page's scripts is enough to flag it.