clsx

About

A tiny (239B) utility for constructing className strings conditionally.

What detecting clsx tells you about a site

clsx is a tiny utility for conditionally joining class names, and its presence is a reliable marker of a utility-CSS workflow — almost always Tailwind. On its own it says little, but combined with tailwind-merge and class-variance-authority it is a near-certain fingerprint of a shadcn/ui-style component layer.

Why the exact clsx version matters

clsx is API-stable and rarely the source of issues; the version mostly matters as a freshness signal rather than a behavioural one.

clsx in a real-world stack

When you find clsx in a bundle, it rarely travels alone. tailwind-merge, class-variance-authority, tailwindcss and the @radix-ui primitives — the shadcn/ui stack.

Quick facts

How Sourcemap Explorer detects clsx

clsx ships as v2.1.1, published 2024-04-23 and carries 0 direct dependencies, 15 versions on the registry. Those exact numbers are the footprint Sourcemap Explorer matches when clsx rides inside a deployed bundle — here is how the detection works.

We catch clsx from two complementary signals: bundled source paths and the embedded package.json. Modern bundlers (webpack, Vite, esbuild, Rollup, Turbopack) preserve the original node_modules/clsx/ 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 — that map is where the `clsx` paths live.

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/clsx/` — every match confirms the package is bundled. The matching `sourcesContent[i]` for `node_modules/clsx/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/clsx/package.json")) | $m.sourcesContent[.key] | fromjson | .version' bundle.js.map`. Sourcemap Explorer automates the same query in the popup.

Major releases of clsx

When each major version first landed. Major bumps are where breaking changes live, so this timeline is the fastest way to date the clsx version a site actually ships against the ecosystem.

Recent versions

clsx README

Live mirror of the GitHub README, for reference. Updated whenever the repo's default branch changes.

$ npm install --save clsx

import clsx from 'clsx';
// or
import { clsx } from 'clsx';

// Strings (variadic)
clsx('foo', true && 'bar', 'baz');
//=> 'foo bar baz'

// Objects
clsx({ foo:true, bar:false, baz:isTrue() });
//=> 'foo baz'

// Objects (variadic)
clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' });
//=> 'foo --foobar'

// Arrays
clsx(['foo', 0, false, 'bar']);
//=> 'foo bar'

// Arrays (variadic)
clsx(['foo'], ['', 0, false, 'bar'], [['baz', [['hello'], 'there']]]);
//=> 'foo bar baz hello there'

// Kitchen sink (with nesting)
clsx('foo', [1 && 'bar', { baz:false, bat:null }, ['hello', ['world']]], 'cya');
//=> 'foo bar hello world cya'

clsx(true, false, '', null, undefined, 0, NaN);
//=> ''

import { clsx } from 'clsx';
// or
import clsx from 'clsx';

import { clsx } from 'clsx/lite';
// or
import clsx from 'clsx/lite';

// string
clsx('hello', true && 'foo', false && 'bar');
// => "hello foo"

// NOTE: Any non-string input(s) ignored
clsx({ foo: true });
//=> ""

 {
  "tailwindCSS.experimental.classRegex": [
    ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ]
 }

clsx('text-base', props.active && 'text-primary', props.className);

FAQ