@t99/classy

A tiny HTML class name utility for composing class strings from strings, arrays, and conditional objects.

Duplicate classes are removed, whitespace is normalized, and (optionally) Tailwind class conflicts are resolved with tailwind-merge.

Install

npm install @t99/classy

Usage

import { classy } from "@t99/classy";

const className = classy(
	"flex items-center px-2",
	["gap-2", "px-4"],
	{
		"font-bold": true,
		hidden: false,
		"tracking-wide text-sm": () => true,
	},
);

console.log(className);
// "flex items-center gap-2 px-4 font-bold tracking-wide text-sm"

API

classy(...input)

Accepts any mix of:

• strings: split on whitespace and normalized.
• arrays: recursively flattened.
• objects: keys are included when their values are truthy.
• functions in object values: called and included when the return value is truthy.
• other values: ignored.

Returns a single class string. If tailwind-merge is installed, classy uses it once at the end to resolve Tailwind class conflicts. If tailwind-merge is not installed, classy skips that step and returns the normalized, deduplicated class string.

Development

npm install
npm test
npm run build
npm pack --dry-run