Simple classname utility for whitespace sanitizing and conditional rendering.
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`
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`([^`]*)`", "[`'\"`]([^'\"`,;]*)[`'\"`]"], // ... ],
Classname utility for conditionally joining classNames together. It uses function arguments instead of template literals.
Licensed under the MIT license. See LICENSE for more information.