@mysetup/classnames

Merge conditional class names and resolve Tailwind conflicts with one helper.

Installation

pnpm add @mysetup/classnames

Supported libraries and runtimes

| Supported | Notes | | --------- | ---------------------- | | Vite | Full support | | Next.js | Full support | | Node.js | Full support | | React | Works in any React app |

Usage

import { classNames } from "@mysetup/classnames";

export function Button({
    active,
    className,
}: {
    active?: boolean;
    className?: string;
}) {
    return (
        <button
            className={classNames(
                "rounded-md px-4 py-2 text-sm font-medium",
                active
                    ? "bg-slate-900 text-white"
                    : "bg-slate-100 text-slate-900",
                className,
            )}
        >
            Save
        </button>
    );
}

API

classNames(...classes: ClassValue[]): string