alice.pds.demo.boltless.dev
This repository has no description
web: teach tailwind-merge about the type scale tokens
the design-system type utilities are text-heading-3, text-paragraph-small and so
on, which tailwind-merge reads as text-<colour> rather than as font sizes. that
means any tv() definition whose variants set a text colour silently drops its own
size: tv({ base: 'text-paragraph-small text-foreground-muted' }) resolves to just
the colour.
/tv exports a createTV instance that registers the tokens as font sizes, so
the size and the colour both survive while Tailwind's own text-sm/text-lg
merging keeps working. every component that used tv now imports it from there.
User.svelte is the one holdout, since it has unrelated uncommitted work in it.
Signed-off-by: eti <eti@eti.tf>
author
eti
committer
dawn
date
(Jul 30, 2026, 7:45 PM +0300)
commit
a392b3b7
a392b3b70574219131551fd4af0ec0c1ca3ed893
parent
3ba52331
3ba52331fbe4e9979d40efab9411133a928bceea
change-id
mrmonkmv
mrmonkmvlsmwoulksnxumksvquonknys
+53
-14
+1
-1
web/src/lib/components/repo/issues/IssueStatePill.svelte
+1
-1
web/src/lib/components/repo/issues/IssueStatePill.svelte
···
1
1
<script module lang="ts">
2
-
import { tv, type VariantProps } from "tailwind-variants";
2
+
import { tv, type VariantProps } from "$lib/tv";
3
3
4
4
export const issueStatePill = tv({
5
5
base: "inline-flex items-center gap-1.5 rounded px-2 py-1 text-sm text-foreground-on-emphasis select-none",
+1
-1
web/src/lib/components/ui/Button.svelte
+1
-1
web/src/lib/components/ui/Button.svelte
+1
-1
web/src/lib/components/ui/ButtonCard.svelte
+1
-1
web/src/lib/components/ui/ButtonCard.svelte
+1
-1
web/src/lib/components/ui/ButtonGroup.svelte
+1
-1
web/src/lib/components/ui/ButtonGroup.svelte
+1
-1
web/src/lib/components/ui/Dropdown.svelte
+1
-1
web/src/lib/components/ui/Dropdown.svelte
+1
-1
web/src/lib/components/ui/DropdownItem.svelte
+1
-1
web/src/lib/components/ui/DropdownItem.svelte
···
1
1
<script module lang="ts">
2
-
import { tv, type VariantProps } from "tailwind-variants";
2
+
import { tv, type VariantProps } from "$lib/tv";
3
3
4
4
export const dropdownItem = tv({
5
5
base: "flex w-full cursor-pointer items-center gap-2 bg-transparent p-2 text-left no-underline hover:no-underline",
+1
-1
web/src/lib/components/ui/Error.svelte
+1
-1
web/src/lib/components/ui/Error.svelte
+1
-1
web/src/lib/components/ui/Input.svelte
+1
-1
web/src/lib/components/ui/Input.svelte
+1
-1
web/src/lib/components/ui/Link.svelte
+1
-1
web/src/lib/components/ui/Link.svelte
···
1
1
<script module lang="ts">
2
-
import { tv, type VariantProps } from "tailwind-variants";
2
+
import { tv, type VariantProps } from "$lib/tv";
3
3
4
4
export const link = tv({
5
5
base: "inline-flex cursor-pointer items-center gap-1 no-underline transition-colors duration-150 ease-in-out select-none hover:underline focus-visible:outline-2 focus-visible:outline-offset-2",
+1
-1
web/src/lib/components/ui/Pagination.svelte
+1
-1
web/src/lib/components/ui/Pagination.svelte
+1
-1
web/src/lib/components/ui/Select.svelte
+1
-1
web/src/lib/components/ui/Select.svelte
···
1
1
<script module lang="ts">
2
-
import { tv, type VariantProps } from "tailwind-variants";
2
+
import { tv, type VariantProps } from "$lib/tv";
3
3
4
4
export const select = tv({
5
5
base: "w-full appearance-none rounded border bg-background-default px-3 py-2 pr-9 text-sm transition-colors outline-none disabled:cursor-not-allowed",
+1
-1
web/src/lib/components/ui/Tag.svelte
+1
-1
web/src/lib/components/ui/Tag.svelte
+1
-1
web/src/lib/components/ui/Textarea.svelte
+1
-1
web/src/lib/components/ui/Textarea.svelte
···
1
1
<script module lang="ts">
2
-
import { tv, type VariantProps } from "tailwind-variants";
2
+
import { tv, type VariantProps } from "$lib/tv";
3
3
4
4
// exported so anything that swaps itself in for the field — MarkdownEditor's preview pane —
5
5
// can match its height and avoid resizing the box as you toggle between them.
+1
-1
web/src/lib/components/ui/Typography.svelte
+1
-1
web/src/lib/components/ui/Typography.svelte
+39
web/src/lib/tv.ts
+39
web/src/lib/tv.ts
···
1
+
import { 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
+
*/
16
+
const 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
+
31
+
export const tv = createTV({
32
+
twMergeConfig: {
33
+
classGroups: {
34
+
"font-size": [{ text: fontSizes }]
35
+
}
36
+
}
37
+
});
38
+
39
+
export type { VariantProps } from "tailwind-variants";