1# Tailwind Integration
2 
3Map design system tokens to Tailwind CSS configuration.
4 
5## CSS Variables Setup
6 
7### Base Layer
8 
9```css
10/* globals.css */
11@tailwind base;
12@tailwind components;
13@tailwind utilities;
14 
15@layer base {
16  :root {
17    /* Primitives */
18    --color-blue-600: 37 99 235;  /* HSL: 217 91% 60% */
19 
20    /* Semantic */
21    --background: 0 0% 100%;
22    --foreground: 222 47% 11%;
23    --primary: 217 91% 60%;
24    --primary-foreground: 0 0% 100%;
25    --secondary: 220 14% 96%;
26    --secondary-foreground: 222 47% 11%;
27    --muted: 220 14% 96%;
28    --muted-foreground: 220 9% 46%;
29    --accent: 220 14% 96%;
30    --accent-foreground: 222 47% 11%;
31    --destructive: 0 84% 60%;
32    --destructive-foreground: 0 0% 100%;
33    --border: 220 13% 91%;
34    --input: 220 13% 91%;
35    --ring: 217 91% 60%;
36    --radius: 0.5rem;
37  }
38 
39  .dark {
40    --background: 222 47% 4%;
41    --foreground: 210 40% 98%;
42    --primary: 217 91% 60%;
43    --primary-foreground: 0 0% 100%;
44    --secondary: 217 33% 17%;
45    --secondary-foreground: 210 40% 98%;
46    --muted: 217 33% 17%;
47    --muted-foreground: 215 20% 65%;
48    --accent: 217 33% 17%;
49    --accent-foreground: 210 40% 98%;
50    --destructive: 0 62% 30%;
51    --destructive-foreground: 0 0% 100%;
52    --border: 217 33% 17%;
53    --input: 217 33% 17%;
54    --ring: 217 91% 60%;
55  }
56}
57```
58 
59## Tailwind Config
60 
61### tailwind.config.ts
62 
63```typescript
64import type { Config } from 'tailwindcss'
65 
66const config: Config = {
67  darkMode: ['class'],
68  content: ['./src/**/*.{ts,tsx}'],
69  theme: {
70    extend: {
71      colors: {
72        background: 'hsl(var(--background))',
73        foreground: 'hsl(var(--foreground))',
74        primary: {
75          DEFAULT: 'hsl(var(--primary))',
76          foreground: 'hsl(var(--primary-foreground))',
77        },
78        secondary: {
79          DEFAULT: 'hsl(var(--secondary))',
80          foreground: 'hsl(var(--secondary-foreground))',
81        },
82        muted: {
83          DEFAULT: 'hsl(var(--muted))',
84          foreground: 'hsl(var(--muted-foreground))',
85        },
86        accent: {
87          DEFAULT: 'hsl(var(--accent))',
88          foreground: 'hsl(var(--accent-foreground))',
89        },
90        destructive: {
91          DEFAULT: 'hsl(var(--destructive))',
92          foreground: 'hsl(var(--destructive-foreground))',
93        },
94        border: 'hsl(var(--border))',
95        input: 'hsl(var(--input))',
96        ring: 'hsl(var(--ring))',
97        card: {
98          DEFAULT: 'hsl(var(--card))',
99          foreground: 'hsl(var(--card-foreground))',
100        },
101      },
102      borderRadius: {
103        lg: 'var(--radius)',
104        md: 'calc(var(--radius) - 2px)',
105        sm: 'calc(var(--radius) - 4px)',
106      },
107    },
108  },
109  plugins: [],
110}
111 
112export default config
113```
114 
115## HSL Format Benefits
116 
117Using HSL without function allows opacity modifiers:
118 
119```tsx
120// With HSL format (space-separated)
121<div className="bg-primary/50">   // 50% opacity
122<div className="text-primary/80"> // 80% opacity
123 
124// CSS output
125background-color: hsl(217 91% 60% / 0.5);
126```
127 
128## Component Classes
129 
130### Button Example
131 
132```css
133@layer components {
134  .btn {
135    @apply inline-flex items-center justify-center
136           rounded-md font-medium
137           transition-colors
138           focus-visible:outline-none focus-visible:ring-2
139           focus-visible:ring-ring focus-visible:ring-offset-2
140           disabled:pointer-events-none disabled:opacity-50;
141  }
142 
143  .btn-default {
144    @apply bg-primary text-primary-foreground
145           hover:bg-primary/90;
146  }
147 
148  .btn-secondary {
149    @apply bg-secondary text-secondary-foreground
150           hover:bg-secondary/80;
151  }
152 
153  .btn-outline {
154    @apply border border-input bg-background
155           hover:bg-accent hover:text-accent-foreground;
156  }
157 
158  .btn-ghost {
159    @apply hover:bg-accent hover:text-accent-foreground;
160  }
161 
162  .btn-destructive {
163    @apply bg-destructive text-destructive-foreground
164           hover:bg-destructive/90;
165  }
166 
167  /* Sizes */
168  .btn-sm { @apply h-8 px-3 text-xs; }
169  .btn-md { @apply h-10 px-4 text-sm; }
170  .btn-lg { @apply h-12 px-6 text-base; }
171}
172```
173 
174## Spacing Integration
175 
176```typescript
177// tailwind.config.ts
178theme: {
179  extend: {
180    spacing: {
181      // Map to CSS variables if needed
182      'section': 'var(--spacing-section)',
183      'component': 'var(--spacing-component)',
184    }
185  }
186}
187```
188 
189## Animation Tokens
190 
191```typescript
192// tailwind.config.ts
193theme: {
194  extend: {
195    transitionDuration: {
196      fast: '150ms',
197      normal: '200ms',
198      slow: '300ms',
199    },
200    keyframes: {
201      'accordion-down': {
202        from: { height: '0' },
203        to: { height: 'var(--radix-accordion-content-height)' },
204      },
205      'accordion-up': {
206        from: { height: 'var(--radix-accordion-content-height)' },
207        to: { height: '0' },
208      },
209    },
210    animation: {
211      'accordion-down': 'accordion-down 0.2s ease-out',
212      'accordion-up': 'accordion-up 0.2s ease-out',
213    },
214  }
215}
216```
217 
218## Dark Mode Toggle
219 
220```typescript
221// Toggle dark mode
222function toggleDarkMode() {
223  document.documentElement.classList.toggle('dark')
224}
225 
226// System preference
227if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
228  document.documentElement.classList.add('dark')
229}
230```
231 
232## shadcn/ui Alignment
233 
234This configuration aligns with shadcn/ui conventions:
235 
236- Same CSS variable naming
237- Same HSL format
238- Same color scale structure
239- Compatible with `npx shadcn@latest add` commands
240 
241### Using with shadcn/ui
242 
243```bash
244# Initialize (uses same token structure)
245npx shadcn@latest init
246 
247# Add components (styled with these tokens)
248npx shadcn@latest add button card input
249```
250 
251Components will automatically use your design system tokens.
252