Централизованное управление интерфейсом через дизайн-токены (CSS Variables) и конфигурацию Tailwind CSS.
Преимущества: Использование единого источника истины через CSS Variables позволяет мгновенно изменять тему и гарантирует, что все компоненты следуют заданным дизайн-токенам.
Файл global.css объединяет слои Tailwind и импортирует токены.
Настройка tailwind.config.ts мапит CSS-переменные в утилиты Tailwind.
Определение базовых токенов: брейкпоинты, размеры шрифтов и сетка.
1:root {
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}Цветовые палитры и тени для светлой и темной тем.
1:root {
2 --background: #f7f7f9;
3 --foreground: #1a1a2e;
4 --primary: #36bffa;
5 --radius: 0.5rem;
6 --shadow: 0px 4px 10px 0px hsl(211 30% 25% / 0.12);
7}
8
9.dark {
10 --background: #0f0f1a;
11 --foreground: #e8e9f0;
12 --primary: #36bffa;
13}
14
15@theme inline {
16 --color-background: var(--background);
17 --color-foreground: var(--foreground);
18 --color-primary: var(--primary);
19 --radius-lg: var(--radius);
20 --shadow-md: var(--shadow);
21}1/** @type {import('tailwindcss').Config} */
2module.exports = {
3 darkMode: ["class"],
4 content: ["./src/**/*.{ts,tsx}"],
5 theme: {
6 extend: {
7 screens: {
8 xs: "var(--breakpoint-xs)",
9 sm: "var(--breakpoint-sm)",
10 },
11 fontSize: {
12 xs: "var(--text-xs)",
13 sm: "var(--text-sm)",
14 },
15 colors: {
16 background: 'var(--background)',
17 primary: 'var(--primary)',
18 }
19 }
20 }
21};Инициализация Tailwind и базовых стилей элементов.
1@import "tailwindcss";
2@import "./theme.css";
3@import "./variables.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 и т.д.). Все цвета должны браться из дизайн-токенов.
1/* ❌ INCORRECT: Hardcoded Tailwind colors */
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">
18 Good Example
19</div>