Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ahmadawais/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!
https://github.com/ahmadawais/mxcn
clsx tailwind tailwind-merge
Last synced: 3 months ago
JSON representation
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!
- Host: GitHub
- URL: https://github.com/ahmadawais/mxcn
- Owner: ahmadawais
- License: mit
- Created: 2023-06-17T13:35:28.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-07-20T12:17:09.000Z (over 1 year ago)
- Last Synced: 2024-10-19T07:54:30.183Z (3 months ago)
- Topics: clsx, tailwind, tailwind-merge
- Language: JavaScript
- Homepage: https://npm.im/mxcn
- Size: 152 KB
- Stars: 63
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md
- Funding: .github/funding.yml
- License: license
- Code of conduct: code-of-conduct.md
Awesome Lists containing this project
README
[](https://github.com/AhmadAwais/mxcn)
# mxcn
[](https://www.npmjs.com/package/mxcn) [](https://NodeCLI.com/?utm_source=FOSS) [](https://VSCode.pro/?utm_source=FOSS) [](https://github.com/ahmadawais/sponsor?utm_source=FOSS)
[](https://twitter.com/mrahmadawais/)
> 172-byte utility library to use both[`clsx`](https://github.com/lukeed/clsx) and [`tailwind-merge`](https://github.com/dcastil/tailwind-merge) in one go. Where class merging becomes a seamless dance, leaving style conflicts in the dust!
- š¦ Use [`clsx`](https://github.com/lukeed/clsx) and [`tailwind-merge`](https://github.com/dcastil/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
```js
// 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.
// 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`](https://github.com/lukeed/clsx) and [`tailwind-merge`](https://github.com/dcastil/tailwind-merge). Cheers!
[](changelog.md)
## Changelog
[āÆ Read the changelog here ā](changelog.md)
**KEY**: `š¦ NEW`, `š IMPROVE`, `š FIX`, `š DOC`, `š RELEASE`, and `š¤ TEST`
> _I use [Emoji-log](https://github.com/ahmadawais/Emoji-Log), you should try it and simplify your git commits._
[](./../../)
## License & Conduct
- MIT Ā© [Ahmad Awais](https://twitter.com/MrAhmadAwais/)
- [Code of Conduct](code-of-conduct.md)
[](./../../)
## 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
### [NodeCLI.com][n] ā 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][n] course.
[][n]
[](./../../)
## Sponsor
I ([Ahmad Awais](https://twitter.com/mrahmadawais/)) and my incredible wife ([Maedah Batool](https://twitter.com/MaedahBatool/)) are two engineers who fell in love with open source and then with each other. You can read more [about me here](https://ahmadawais.com/about). 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.
[][s]
āÆāÆ Professional Development Courses ā
[][n] [][v] [-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