classnames-merge-tw

A very light module helps you conditionally join class names for your components, making it easy to manage dynamic class logic across various CSS frameworks and libraries like Bootstrap, Tailwind CSS, Material-UI, Ant Design, and more.

Install

Install via npm or yarn:

npm install classnames-merge-tw

or

yarn add classnames-merge-tw

Usage

import { cn } from 'classnames-merge-tw';

// Strings
cn('btn', true && 'btn-primary', false && 'btn-disabled');
//=> 'btn btn-primary'

// Objects
cn({ btn: true, 'btn-disabled': false });
//=> 'btn'

// Arrays
cn(['btn', false && 'hidden', 'btn-active']);
//=> 'btn btn-active'

// Complex combinations
cn('text-lg', ['font-bold', { 'text-gray-500': isDisabled }], someClass);
//=> 'text-lg font-bold text-gray-500'

API

• cn(...classNames)
• The cn function takes multiple arguments which can be strings, objects, arrays, booleans, or null/undefined values. It filters out falsey values, leaving only valid class names.

Parameters:

• classNames: Mixed – Any combination of strings, objects, or arrays.
• Returns a single, space-separated string with the valid class names.

cn(true, false, '', null, undefined, 0, NaN);

//=> ''

Example Usage in TailwindCSS

• This utility is particularly useful when working with TailwindCSS, allowing you to conditionally apply classes based on state.

cn('text-sm', isActive && 'text-primary', 'p-4');

Examples for Other CSS & UI Frameworks

• Bootstrap

const buttonClass = cn('btn', 'btn-primary', { 'active': isActive });
//=> 'btn btn-primary active'

• Material-UI

const muiClass = cn('MuiButton-root', { 'MuiButton-disabled': isDisabled });
//=> 'MuiButton-root MuiButton-disabled'

• Ant Design

const antClass = cn('ant-btn', 'ant-btn-primary', { 'ant-btn-dangerous': isDanger });
//=> 'ant-btn ant-btn-primary ant-btn-dangerous'

//=> 'text-sm text-primary p-4'

License MIT © Lavisar