mxcn

mxcn

172-byte utility library to use bothclsx and tailwind-merge in one go. Where class merging becomes a seamless dance, leaving style conflicts in the dust!

• 📦 Use clsx and tailwind-merge in one go
• 🧿 Fully typed, built-in TypeScript declarations
• 🎛️ Works in modern browsers & Node >=12
• 🎖️ This module is available in three formats:
• 📟 ES Module: dist/index.js
• 📼 CommonJS: dist/index.cjs
• 🌍 UMD: dist/index.global.js

Install

npm i mxcn

Usage

// Note: I called it `cn` as in className.
// Use ESM `import` statement syntax for ESM lib.
import cn from 'mxcn';
import { cn } from 'mxcn'; // Or named import.

// OR use CommonJS `require` syntax for CommonJS lib.
const cn = require('mxcn');

// Basic usage in React.
<div className={cn('custom class or tailwind px-2 py-3 flex')} />

// Example: Combined, any example of tailwind-merge or clsx works.
cn('px-2 py-1 bg-red hover:bg-dark-red', null, true && 'p-3 bg-[#B91C1C]')
//=> 'hover:bg-dark-red p-3 bg-[#B91C1C]'

// Example: tailwind-merge
cn('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]')
//=> 'hover:bg-dark-red p-3 bg-[#B91C1C]'
// Why? px-2 and py-1 are removed because of p-3 that came afterwards.

// Example: clsx
// Strings (variadic)
cn('foo', true && 'bar', 'baz')
//=> 'foo bar baz'

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

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

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

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

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

For more please check the docs of clsx and tailwind-merge. Cheers!

Changelog

❯ Read the changelog here →

KEY: 📦 NEW, 👌 IMPROVE, 🐛 FIX, 📖 DOC, 🚀 RELEASE, and 🤖 TEST

I use Emoji-log, you should try it and simplify your git commits.

License & Conduct

• MIT © Ahmad Awais
• Code of Conduct

Connect