tailwind-class-resolver

A lightweight, zero-dependency Tailwind CSS class merger and conflict resolver. It combines the functionality of clsx (dynamic class names joining) and tailwind-merge (resolving overlapping utility class conflicts) into a single, high-performance library.

Features

• 🚀 Zero dependencies — extremely fast and clean.
• 🛠️ Clsx Arguments Support — accept strings, arrays, objects, nested lists, and truthy/falsy toggles.
• 🎯 Conflict Resolution — resolves overlapping Tailwind classes (e.g., merging px-4 px-2 to px-2).
• ⚡ Responsive Aware — respects responsive modifiers, keeping your screen-size overrides intact (e.g., px-4 md:px-6 px-2 resolves to px-2 md:px-6).
• 🎨 State/Pseudo Modifiers Aware — resolves state modifiers separately (e.g. hover:bg-red-500 hover:bg-blue-500 -> hover:bg-blue-500).

Installation

npm install tailwind-class-resolver

Usage

const { mergeClasses } = require('tailwind-class-resolver');

// 1. Basic conflict resolution (last one wins)
console.log(mergeClasses('px-4 px-2 bg-red-500 bg-blue-500'));
// Output: "px-2 bg-blue-500"

// 2. Modifiers support
console.log(mergeClasses('px-4 md:px-8 px-2 hover:bg-red-500 hover:bg-blue-500'));
// Output: "px-2 md:px-8 hover:bg-blue-500"

// 3. Clsx conditional syntax
const isUrgent = true;
const isPending = false;
console.log(
  mergeClasses(
    'p-4 bg-gray-100',
    {
      'bg-red-500 text-white': isUrgent,
      'bg-yellow-200': isPending
    },
    ['font-bold', 'rounded-md']
  )
);
// Output: "p-4 text-white bg-red-500 font-bold rounded-md"

API

mergeClasses(...args)

Joins multiple class parameters together while resolving overriding conflicts.

Arguments can be:

• string (e.g. 'px-4 py-2')
• Object (e.g. {'bg-red-500': isUrgent, 'bg-gray-100': !isUrgent})
• Array of strings, objects, or nested arrays
• Falsy values (null, undefined, false, 0, "") are safely ignored.

License

MIT