@bitcurve/reactor-style

This package exports a custom cn() function for merging CSS class names with tailwindcss.

It is specifically configured for use projects that leverage the @bitcurve/reactor-* packages.

Overview

The cn() function is a popular pattern that combines the functionality of clsx with tailwind-merge to intelligently merge tailwind utility classes.

This version of the function includes custom configuration for tailwind-merge that reflects the @bitcurve/reactor-tw-core tailwind preset and supports fluid-tailwind (https://fluid.tw/) for fluid responsive design.

The package includes an independent implementation of clsx to avoid the need for the clsx package as a dependency

Installation

Install the package's peer dependencies as dependencies:

pnpm add tailwind-merge @fluid-tailwind/tailwind-merge

Install this package as a dependency:

pnpm add @bitcurve/reactor-style

Usage

Merge css class names with cn()

import { cn } from '@bitcurve/reactor-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