This package exports a custom cn()
function for merging class names that incorporates a special configuration of tailwind-merge
and a custom drop-in replacement of clsx
for one less dependency.
The cn()
function is configured to recognize and merge custom class names corresponding to custom tailwindcss variants and utilities that are defined by the preset and plugins exported by the @bitcurve/flint-tailwind
package.
Install the package as a dependency and ensure that the peer dependency tailwind-merge
is also installed.
pnpm add @bitcurve/flint-style tailwind-merge
The cn()
function assumes that the consuming project is using tailwindcss
configured to use the prest exported by @bitcurve/flint-tailwind
.
import { cn } from '@bitcurve/flint-style'
const className = cn('text-primary-500', 'bg-primary-100', 'hover:bg-primary-200')
The cn()
function supports the same syntax as clsx
including arrays and objects.
Refer to the clsx docs for more details: https://www.npmjs.com/package/clsx