0.0.4 • Published 11 months ago
mcn v0.0.4
A tiny utility for conditionally joining classNames together.
npm install mcn # or yarn add mcn or pnpm add mcn
This utility is similar to clx or classnames with an additional tuple syntax [boolean, show if true, show if false]
. It also difers in that it infers the literal string type which means if you hover over a variable in your IDE you will see the assigned classnames.
Usage
import { cn } from 'mcn'
cn('rounded-full', active && 'bg-blue')
cn([active, 'border-black', 'border-white'], { 'text-white': active })
cn('bg-white', [active, 'border-blue'])
cn('bg-white', { 'border-blue': active })
// Infered type ("bg-white" | "bg-white border-blue")
cn('bg-white', [active, 'border-blue', 'border-white'] as const)
// Infered type ("bg-white border-blue" | "bg-white border-white")
// Falsy values are ignored
cn(null, undefined, false, true)
Tailwind Support
Enable classes autocompletion using cn
with Tailwind CSS.
Install the "Tailwind CSS IntelliSense" Visual Studio Code extension
Add the following to your
settings.json
:{ "tailwindCSS.experimental.classRegex": [ ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"] ] }
License
MIT © Dan Beaven
0.0.3
11 months ago
0.0.2
11 months ago
0.0.0-dev.1
11 months ago
0.0.0-dev.0
11 months ago
0.0.4
11 months ago
0.1.0
2 years ago
0.0.1
2 years ago