![mxcn](https://github.com/ahmadawais/mxcn/raw/HEAD/./.github/logo.jpg)
mxcn
![Follow @MrAhmadAwais on Twitter](https://img.shields.io/badge/Twitter-@MRAHMADAWAIS-gray.svg?colorA=21262D&colorB=30363D&style=flat)
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
![📟](https://raw.githubusercontent.com/ahmadawais/stuff/master/images/git/install.png)
Install
npm i mxcn
![⚙️](https://raw.githubusercontent.com/ahmadawais/stuff/master/images/git/usage.png)
Usage
import cn from 'mxcn';
import { cn } from 'mxcn';
const cn = require('mxcn');
<div className={cn('custom class or tailwind px-2 py-3 flex')} />
cn('px-2 py-1 bg-red hover:bg-dark-red', null, true && 'p-3 bg-[#B91C1C]')
cn('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]')
cn('foo', true && 'bar', 'baz')
cn({ foo:true, bar:false, baz:isTrue() })
cn({ foo:true }, { bar:false }, null, { '--foobar':'hello' })
cn(['foo', 0, false, 'bar'])
cn(['foo'], ['', 0, false, 'bar'], [['baz', [['hello'], 'there']]])
cn('foo', [1 && 'bar', { baz:false, bat:null }, ['hello', ['world']]], 'cya')
For more please check the docs of clsx
and tailwind-merge
. Cheers!
![📝](https://raw.githubusercontent.com/ahmadawais/stuff/master/images/git/log.png)
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.
![📃](https://raw.githubusercontent.com/ahmadawais/stuff/master/images/git/license.png)
License & Conduct
![🙌](https://raw.githubusercontent.com/ahmadawais/stuff/master/images/git/connect.png)
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
![⚙️](https://raw.githubusercontent.com/ahmadawais/stuff/master/images/git/usage.png)
Course Recommendation
NodeCLI.com — Learn to build Node.js CLI Automation
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 course.
![Node CLI Course](https://raw.githubusercontent.com/ahmadawais/stuff/master/nodecli/featured.jpg)
![👌](https://raw.githubusercontent.com/ahmadawais/stuff/master/images/git/sponsor.png)
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](https://raw.githubusercontent.com/ahmadawais/stuff/master/sponsor/sponsor.jpg)
❯❯ Professional Development Courses ↓
![Node.js Course](https://img.shields.io/badge/LEARN-Node.js%20(free)-gray.svg?colorA=21262D&colorB=30363D&style=for-the-badge)