Beta

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.

Installation

  1. 1

    Add the following code to your utils.ts file.

    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>  );};