feat(utils): wrapper for `clsx` and `tailwind-merge`

[AnsonH]

Description

Create a new wrapper utility that combines the functionality of the following 2 libraries:

• clsx - Utility for constructing className conditionally
• tailwind-merge - Merge Tailwind CSS classes in JS without style conflicts (See motivation here)

Example Implementation

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

function cn(...args: ClassValue[]) {
  return twMerge(clsx(args));
}

export default cn;

Example Usage

// Suppose there's a boolean prop called `warning`
<button
   className={cn(
     "text-gray-800",
     // With tailwind-merge, we don't need to add `!` before `text-yellow-800` to make sure
     // this class overrides the original `text-gray-800` styles
     warning && "text-yellow-800",
   )}
>Test</button>

Reference

https://twitter.com/shadcn/status/1614692419039105024/photo/1