Tailwind Classnames

cx.tsx

const heading = ["font-inter", "font-bold"];

const config = {
  // Components
  "c.heading": heading,
  "c.h1": [...heading, "text-5xl"],
  "c.h2": [...heading, "text-4xl"],
  "c.h3": [...heading, "text-3xl"],
  "c.container": ["block", "mx-auto", "max-w-5xl", "px-4"],
  // Utilities
  "u.border": ["border-line", "border-4"],
};

/**
 * Classnames
 *
 * Concatenate classes (including pre-defined class arrays)
 */
export const cx = (...classNames: (keyof typeof config | ({} & string))[]) =>
  classNames
    .map((className) =>
      config.hasOwnProperty(className) ? config[className] : className
    )
    .flat()
    .filter(Boolean)
    .join(" ");

// Autocompletes config keys (+ works with Tailwind IntelliSense)
export const Example = () => (
  <h1 className={cx("c.h1", "mt-4", "some-other-class")}>Heading 1</h1>
);