clsx + tailwind-merge

Tailwind class utilities

FreeLibraries & build toolinggithub.com

What it is

The two halves of shadcn's cn() helper. clsx joins class names conditionally; tailwind-merge (v3) then resolves Tailwind conflicts so a later px-4 actually overrides an earlier px-2 instead of both landing in the class list.

Why it earns a slot

Already in every shadcn project as lib/utils.ts. Without tailwind-merge, passing a className prop to override a component's padding silently does nothing — the most common Tailwind bug in AI-written components.

Know before you commit

tailwind-merge ships its own copy of Tailwind's class groups, so heavy custom theme values may need extendTailwindMerge to teach it your classes.

Getting started

npm install clsx tailwind-merge

Field notes

0 from the community

Loading notes…

Field check

Unverified

Pricing snapshot

Free · MIT

Snapshots move fast — verify at checkout, and post a field note if it changed.

Drop into your Lovable chat

Evaluate clsx + tailwind-merge (https://github.com/dcastil/tailwind-merge) for this project, then use it only if it fits what we are already building.
Context: Tailwind class utilities. The two halves of shadcn's cn() helper. clsx joins class names conditionally; tailwind-merge (v3) then resolves Tailwind conflicts so a later px-4 actually overrides an earlier px-2 instead of both landing in the class list.
Reviewer notes (general, not written for this codebase): Already in every shadcn project as lib/utils.ts. Without tailwind-merge, passing a className prop to override a component's padding silently does nothing — the most common Tailwind bug in AI-written components.
Watch out for: tailwind-merge ships its own copy of Tailwind's class groups, so heavy custom theme values may need extendTailwindMerge to teach it your classes.
Pricing: Free · MIT
Setup: npm install clsx tailwind-merge
Rules: treat the notes above as background only. Do not assume a theme, style, layout or feature that is not already in this project — inspect the existing code first and ask me before changing visual direction.

/api/public/tools/clsx-tailwind-merge