Централизованное управление интерфейсом через дизайн-токены (CSS Variables) и конфигурацию Tailwind CSS.
Преимущества: Использование единого источника истины через CSS Variables позволяет мгновенно изменять тему и гарантирует, что все компоненты следуют заданным дизайн-токенам.
Файл globals.css импортирует Tailwind v4, variables.css и theme.css и задаёт базовые слои.
Настраивается в CSS: @theme inline в theme.css мапит CSS-переменные в утилиты, @custom-variant включает класс dark. tailwind.config.ts не нужен.
Технические токены в @theme: брейкпоинты и размеры шрифтов сразу становятся утилитами.
1@theme {
2 /* Breakpoints */
3 --breakpoint-xs: 30rem; /* 480px */
4 --breakpoint-sm: 40rem; /* 640px */
5 --breakpoint-md: 48rem; /* 768px */
6 --breakpoint-lg: 64rem; /* 1024px */
7 --breakpoint-xl: 80rem; /* 1280px */
8
9 /* Font sizes */
10 --text-xs: 0.75rem; /* 12px */
11 --text-sm: 0.875rem; /* 14px */
12 --text-base: 1rem; /* 16px */
13 --text-lg: 1.125rem; /* 18px */
14 --text-xl: 1.25rem; /* 20px */
15}Все цветовые токены для светлой и тёмной темы, смапленные в утилиты через @theme inline.
1@custom-variant dark (&:is(.dark *));
2
3:root {
4 --background: #f7f7f9;
5 --foreground: #1a1a2e;
6 --card: #ffffff;
7 --card-foreground: #1a1a2e;
8 --popover: #ffffff;
9 --popover-foreground: #1a1a2e;
10 --primary: #36bffa;
11 --primary-foreground: #ffffff;
12 --secondary: #eef0f6;
13 --secondary-foreground: #1a1a2e;
14 --muted: #eef0f6;
15 --muted-foreground: #6b6f80;
16 --accent: #e6f6fe;
17 --accent-foreground: #1a1a2e;
18 --destructive: #e5484d;
19 --destructive-foreground: #ffffff;
20 --border: #e2e4ec;
21 --input: #e2e4ec;
22 --ring: #36bffa;
23 --radius: 0.5rem;
24 --shadow: 0px 4px 10px 0px hsl(211 30% 25% / 0.12);
25}
26
27.dark {
28 --background: #0f0f1a;
29 --foreground: #e8e9f0;
30 --card: #171726;
31 --card-foreground: #e8e9f0;
32 --popover: #171726;
33 --popover-foreground: #e8e9f0;
34 --primary: #36bffa;
35 --primary-foreground: #0f0f1a;
36 --secondary: #23233a;
37 --secondary-foreground: #e8e9f0;
38 --muted: #23233a;
39 --muted-foreground: #9a9cb0;
40 --accent: #1d2b3a;
41 --accent-foreground: #e8e9f0;
42 --destructive: #f2555a;
43 --destructive-foreground: #0f0f1a;
44 --border: #2a2a40;
45 --input: #2a2a40;
46 --ring: #36bffa;
47}
48
49@theme inline {
50 --color-background: var(--background);
51 --color-foreground: var(--foreground);
52 --color-card: var(--card);
53 --color-card-foreground: var(--card-foreground);
54 --color-popover: var(--popover);
55 --color-popover-foreground: var(--popover-foreground);
56 --color-primary: var(--primary);
57 --color-primary-foreground: var(--primary-foreground);
58 --color-secondary: var(--secondary);
59 --color-secondary-foreground: var(--secondary-foreground);
60 --color-muted: var(--muted);
61 --color-muted-foreground: var(--muted-foreground);
62 --color-accent: var(--accent);
63 --color-accent-foreground: var(--accent-foreground);
64 --color-destructive: var(--destructive);
65 --color-destructive-foreground: var(--destructive-foreground);
66 --color-border: var(--border);
67 --color-input: var(--input);
68 --color-ring: var(--ring);
69 --radius-lg: var(--radius);
70 --shadow-md: var(--shadow);
71}Инициализация Tailwind и базовых стилей элементов.
1@import "tailwindcss";
2@import "./variables.css";
3@import "./theme.css";
4
5@layer base {
6 * {
7 @apply border-border outline-ring/50;
8 }
9 body {
10 @apply bg-background text-foreground;
11 font-family: 'Inter', system-ui, sans-serif;
12 }
13}Абсолютный запрет на стандартные цвета Tailwind (blue-500, red-600 и т.д.) и статические white/black. Все цвета — только из дизайн-токенов.
1/* ❌ INCORRECT: Hardcoded Tailwind colors (blue-500) and static white */
2<div className="bg-blue-500 text-white p-4">
3 Bad Example
4</div>
5
6/* ✅ CORRECT: Using design tokens */
7<div className="bg-primary text-primary-foreground p-4">
8 Good Example
9</div>
10
11/* ❌ INCORRECT: Arbitrary values */
12<div className="p-[17px] bg-[#ff0000]">
13 Bad Example
14</div>
15
16/* ✅ CORRECT: Using spacing scale */
17<div className="p-4 bg-destructive text-destructive-foreground">
18 Good Example
19</div>