@myprofile/classnames

classNames is a utility function that merges classes conditionally and removes Tailwind CSS style conflicts.

Based on clsx and tailwind-merge.

Usage

By passing the className prop as the last argument to the classNames function, it allows us to override styles in another component.

Typically with Tailwind CSS the only way to override w-10 with w-5 is to remove w-10. classNames takes care of those conflicts automatically.

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

interface BoxProps {
    className?: string;
}

export const Box = function Box({ className }: BoxProps) {
    const classes = classNames("h-10 w-10 bg-black", className);

    return <div className={classes} />; // <div class="h-10 w-10 bg-black" />
};

export const SmallBox = function SmallBox() {
    return <Box className="h-5 w-5" />; // <div class="h-5 w-5 bg-black" />
};