clx

clx is a utility function that adds class names to your components, with support for conditional classes and merging Tailwind CSS classes.

In this guide, you'll learn how to use the clx utility function.

Usage#

The clx function is built using clsx and tw-merge. It is intended to be used with Tailwind CSS to efficiently add classes to your components.

clx is useful for:

• Conditionally apply classes based on props or state. For example, you can apply the hidden class if a component's open state variable is false.
• Merge multiple strings into a single class name string. For example, you can apply class names to the component, and allow passing additional class names as props.
• Override conflicting Tailwind CSS classes. For example, if you specify a p-2 class name on your component, and you pass a p-4 class name as a prop, the p-4 class will take precedence.
  • The last class name specified will take precedence over any previous class names.

For example:

Code
1import { clx } from "@medusajs/ui"2
3type BoxProps = {4  className?: string5  children: React.ReactNode6  mt: "sm" | "md" | "lg"7}8
9const Box = ({ className, children, mt }: 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, you use clx to:

• Apply a base style.
• Apply a margin top that depends on the mt prop.
• Add class names passed as a prop.

clx ensures that Tailwind CSS classes are merged without style conflicts.

API Reference#

clx Parameters#

clx accepts any number of arguments, each of them can be of the following types:

• string: A string of class names to apply.

Code
clx("flex items-center justify-between")

• Record<string, boolean>: An object whose keys are the class names to apply, and the values are booleans indicating whether to apply the class names.

Code
1clx({2  "flex items-center justify-between": isFlex,3})

• Array: An array of strings or objects to apply.

Code
1clx([2  "flex items-center justify-between",3  {4    "hidden": isHidden,5  },6])