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.

!TypeScript
!JavaScript
!TailwindCSS

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:

``bash
npm install @sglara/cn
`

Usage

$3

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

$3

#### Basic Usage

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

#### Conditional Classes

`typescript
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

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

#### Using with Arrays

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

$3

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

`typescript
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.