classes

Simple classname utility for whitespace sanitizing and conditional rendering.

Usage

yarn add @3c1u/classes

const disabled = true
const isActive = false
const isPrimary = true

const className = classes`
  ${disabled && 'opacity-90'}
  ${[isActive && 'bg-blue-500', 'focus:ring']}
  ${{
    'font-bold': isPrimary,
  }}
`

import { twMerge } from 'tailwind-merge'

const tw = createClasses(twMerge)

const className = tw`bg-blue-500 bg-blue-600`

Usage with Tailwind CSS + Visual Studio Code

To get autocomplete working with Tailwind CSS, install the Tailwind CSS IntelliSense extension. Then, add the following to your settings.json:

  "tailwindCSS.experimental.classRegex": [
    ["tw`([^`]*)`", "[`'\"`]([^'\"`,;]*)[`'\"`]"],
    // ...
  ],

Similar Projects

clsx

Classname utility for conditionally joining classNames together. It uses function arguments instead of template literals.

License

Licensed under the MIT license. See LICENSE for more information.