@bitcurve/flint-style

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.

Installation

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.

Usage

Merge css class names with cn()

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