mxcn
v2.0.0TypeScript
Utility function to use both `clsx` and `tailwind-merge` in one go. Where class merging becomes a seamless dance, leaving style conflicts in the dust!
0/weekUpdated 2 years agoMITUnpacked: 155.5 KB
Published by Ahmad Awais
npm install 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
``sh`
npm i mxcn
Usage
`jscn
// Note: I called it as in className.import
// Use ESM 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.
// 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
(follow) To get #OneDevMinute development tips
(connect) On LinkedIn, you know what to do here
(subscribe) Tech talks & #OneDevMinute videos
(read) In-depth & long-form technical articles
(follow) my free and open-source work
Course Recommendation
$3
> Node CLI Automation development ā without wasting a thousand hours
After building hundreds of developer automation tools used by millions of developers, I am teaching exactly how you can do it yourself with minimum effective effort. Learn to build Node.js & JavaScript-based CLI (Command Line Interface) apps & npm packages. Automate the grunt work, do more in less time, impress your manager, make more salary, and help the community. I'm sharing it all in [this step-by-step 100-videos][n] course.
Sponsor
I (Ahmad Awais) and my incredible wife (Maedah Batool) are two engineers who fell in love with open source and then with each other. You can read more about me here. If you or your company use any of my projects or like what Iām doing then consider backing me. I'm in this for the long run. An open-source developer advocate.
![Sponsor Awais][s]
āÆāÆ Professional Development Courses ā
![Node CLI Course][n] ![VSCode Course][v] ![Node.js Course-gray.svg?colorA=21262D&colorB=30363D&style=for-the-badge)][nj]
[s]: https://github.com/AhmadAwais/sponsor
[n]: https://NodeCLI.com?utm_source=github.com/ahmadawais/mxcn&utm_medium=referral&utm_campaign=profile
[v]: https://VSCode.pro?utm_source=github.com/ahmadawais/mxcn&utm_medium=referral&utm_campaign=profile
[nj]: https://NodejsBeginner.com?utm_source=github.com/ahmadawais/mxcn&utm_medium=referral&utm_campaign=profile
[g]: https://github.com/AhmadAwais