clx

Usage

---

The clx function is a utility function for working with classNames. It is built using clsx and tw-merge and is intended to be used with Tailwind CSS.

1import { clx } from "@medusajs/ui"2
3type BoxProps = {4    className?: string5    children: React.ReactNode6    mt?: "sm" | "md" | "lg"7}8
9const Box = ({ className, children }: BoxProps) => {10  return (11    <div12      className={clx(13        "flex items-center justify-center",14        {15          "mt-4": mt === "sm",16          "mt-8": mt === "md",17          "mt-12": mt === "lg",18        },19        className20      )}21    >22      {children}23    </div>24  )25}

In the above example the utility is used to apply a base style, a margin top that is dependent on the mt prop and a custom className. The Box component accepts a className prop that is merged with the other classNames, and the underlying usage of tw-merge ensures that all Tailwind CSS classes are merged without style conflicts.