cn - A Utility for Tailwind CSS Class Name Management

A utility function that combines the power of clsx and tailwind-merge for seamless management of Tailwind CSS class names.

Features

• Merges Tailwind CSS class names with priority management.
• Supports conditional class names with the flexibility of clsx.
• Simplifies dynamic class name handling in TypeScript and JavaScript projects.

Installation

Install the package via npm:

npm install @sglara/cn

Usage

Import the Function

import { cn } from "@sglara/cn";

Examples

Basic Usage

const className = cn("bg-red-500", "text-white", "bg-blue-500");
console.log(className); // "text-white bg-blue-500"

Conditional Classes

const isActive = true;
const className = cn("bg-red-500", {
  "text-white": isActive,
  "text-gray-500": !isActive,
});
console.log(className); // "bg-red-500 text-white"

Merging Tailwind Classes

const className = cn("p-4", "p-2");
console.log(className); // "p-2"

Using with Arrays

const className = cn("bg-red-500", ["text-white", "rounded-lg"]);
console.log(className); // "bg-red-500 text-white rounded-lg"

TypeScript Support

The function fully supports TypeScript with type definitions for safe and predictable usage:

const className = cn("bg-red-500", { "text-white": true, hidden: false });
// TypeScript will catch errors for invalid inputs.

Why Use This Package?

• Simplify Tailwind CSS Class Management: Avoid repetitive and conflicting class name issues.
• Typed Support: Works seamlessly with both JavaScript and TypeScript.
• Lightweight: Combines two efficient libraries (clsx and tailwind-merge) into one handy utility.

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.

License

This project is licensed under the MIT License.