Two utilities that help with using `class-variance-authority`, Tailwind CSS, and `clsx`

README.md

Utilities for using Tailwind and CVA

Here are two utility functions created by merging the power of Joe Bell's class-variance-authority package, tailwind-merge, and clsx.

twcx

Combines tailwind-merge and clsx into a function that allows for conditional classnames without the worry of Tailwind style conflicts as the output is ran thru twMerge to get rid of duplicates.

twCVA

Takes in a cva instance and returns a function that extends cva's functionality with power of the aforementioned twcx function.

cva_utils.ts

import clsx, { ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export const twcx = (...inputs: ClassValue[]) => {
  return twMerge(clsx(...inputs));
};

/**
 *
 * @param cvaInstance the cva function to use
 * @returns a function that takes the variants and className and returns the merged classnames
 */
export const twCVA = <T extends (props: any) => string>(cvaFn: T) => {
  return (variants?: Parameters<T>[0], ...classList: ClassValue[]) =>
    twcx(cvaFn(variants), ...classList);
};

Could you add an example how to use this? 🙏