Sourcemap Explorer
Stack · npm package

tailwind-merge

Merge Tailwind CSS classes without style conflicts

latest 3.5.0· MIT· 422 versions publishedView on npm

About

Merge Tailwind CSS classes without style conflicts

tailwindcsstailwindcssclassesclassNameclassListmergeconflictoverride

Live mirror of the GitHub README. 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]'

Get started

Quick facts

Latest version3.5.0
LicenseMIT
AuthorDany Castillo
Repositorygithub.com/dcastil/tailwind-merge
Homepagegithub.com/dcastil/tailwind-merge
Installnpm install tailwind-merge
Direct dependencies0

How Sourcemap Explorer detects tailwind-merge

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. 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.

  2. 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. 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.

Recent versions

Version
Released
0.1.0
—
0.1.1
—
0.1.2
—
0.2.0
—
0.3.0
—
0.4.0
—
0.5.0
—
0.5.1
—

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.

What is the latest version of tailwind-merge?

3.5.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.

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. Without sourcemaps, an import / require in the page's scripts is enough to flag it.

Install free on Chrome