Utils

1import { clsx, type ClassValue } from "clsx";
2import { extendTailwindMerge } from "tailwind-merge";
3 
4/**
5 * tailwind-merge doesn't know about the custom `--text-*` font-size scale
6 * defined in globals.css — it only recognizes Tailwind's own default scale
7 * (xs/sm/base/lg/...) as the `font-size` group. Without this, a custom
8 * size like `text-meta` gets
9 * misclassified as a `text-color` utility (they share the `text-` prefix)
10 * and silently dropped whenever a class list also sets a real text color
11 * (e.g. `cn("text-meta", "text-muted-foreground")` loses `text-meta`,
12 * falling back to whatever font-size an ancestor/base class set).
13 */
14const twMerge = extendTailwindMerge({
15  extend: {
16    theme: {
17      text: [
18        "display",
19        "title",
20        "lede",
21        "body",
22        "control",
23        "caption",
24        "minor",
25        "label",
26        "2xs",
27        "meta",
28        "micro",
29      ],
30    },
31  },
32});
33 
34export function cn(...inputs: ClassValue[]) {
35  return twMerge(clsx(inputs));
36}