Pingid / mcn

A tiny utility for conditionally joining classNames together.

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.

Visual Studio Code

1. Install the "Tailwind CSS IntelliSense" Visual Studio Code extension

2. Add the following to your settings.json:

 {
  "tailwindCSS.experimental.classRegex": [
    ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ]
 }

License

MIT © Dan Beaven