Utilities

cx

A utility for constructing className strings without style conflicts.

clsxtailwind-mergeGitHub

The cx utility function combines clsx and tw-merge. This enables you to construct className strings conditionally without having to worry about Tailwind CSS style conflicts.

Project structure

If you are not sure how to structure your project or where to place the utils.ts, we have a recommended project structure for Next.js, Vite, and Remix.

Installation

  1. 1

    Add the following code to your utils.ts file.

    // Tremor cx [v0.0.0]
import clsx, { type ClassValue } from "clsx"import { twMerge } from "tailwind-merge"
export function cx(...args: ClassValue[]) {  return twMerge(clsx(...args))}
  2. 2

    Optional: Setup IntelliSense

    To enable autocompletion, add the following to your settings.json file.
    {  "tailwindCSS.experimental.classRegex": [    ["cx\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]  ]}
  3. 3

    Optional: Prettier plugin setup

    In case you are using prettier-plugin-tailwindcss to keep your class names sorted, you can add cx to the list of functions to get sorted.
    module.exports = {  plugins: [require('prettier-plugin-tailwindcss')],  tailwindFunctions: ['cx']};

Example

The cx utility function is used to conditionally combine class names based on the isShowArray prop, enabling dynamic styling of the component.

const Line = (props: LineProps) => {const { line, lineProps, getTokenProps, isShowArray = true } = props;
  return (    <span      {...lineProps}      className={cx(        'table-row',        !isShowArray ? 'absolute opacity-0' : 'relative',        lineProps.className      )}    >      <span>        {line.map((token, key) => (          <span key={key} {...getTokenProps({ token })} />        ))}      </span>    </span>  );};