Skip to content
/ classes Public

Simple classname utility for whitespace sanitizing and conditional rendering.

License

Notifications You must be signed in to change notification settings

3c1u/classes

Repository files navigation

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

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.

About

Simple classname utility for whitespace sanitizing and conditional rendering.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published