Centralized UI management through design tokens (CSS Variables) and Tailwind CSS configuration.
Benefits: Leveraging a single source of truth via CSS Variables allows for instant theme changes and ensures all components follow defined design tokens.
The global.css file combines Tailwind layers and imports design tokens.
The tailwind.config.ts file maps CSS variables to Tailwind utility classes.
Defining core tokens: breakpoints, font sizes, and grids.
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}Color palettes and shadows for light and dark modes.
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 initialization and base element styles.
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}Absolute restriction on using standard Tailwind colors (blue-500, red-600, etc.). All colors must be derived from design tokens.
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>