alice.pds.demo.boltless.dev
This repository has no description
1import { createTV } from "tailwind-variants";
2
3/**
4 * The design-system type scale lives in `app.css` as `--text-heading-*`,
5 * `--text-paragraph-*` and `--text-monospace-*`, so its utilities read
6 * `text-heading-3`, `text-paragraph-small`, `text-monospace-regular`, and so on.
7 *
8 * tailwind-merge can't tell those apart from `text-<colour>` utilities on its own,
9 * so it treats them as colours and quietly drops the size as soon as a colour
10 * follows — which, in a `tv()` definition whose variants set text colours, is
11 * always. Registering them as font sizes is what keeps both the size and the
12 * colour, and it leaves Tailwind's own `text-sm`/`text-lg` merging intact.
13 *
14 * Use this `tv` rather than importing it straight from `tailwind-variants`.
15 */
16const fontSizes = [
17 "heading-0",
18 "heading-1",
19 "heading-2",
20 "heading-3",
21 "heading-4",
22 "paragraph-large",
23 "paragraph-regular",
24 "paragraph-small",
25 "paragraph-mini",
26 "monospace-large",
27 "monospace-regular",
28 "monospace-small"
29];
30
31export const tv = createTV({
32 twMergeConfig: {
33 classGroups: {
34 "font-size": [{ text: fontSizes }]
35 }
36 }
37});
38
39export type { VariantProps } from "tailwind-variants";