Summary
## Why CSS variables?
Theming in React often gets tangled in context providers and re-renders. By moving theme values into **CSS custom properties**, switching themes becomes a single attribute change on the `` element — no React state, no re-render cascade.
```css
:root {
--bg: #fafafa;
--fg: #0a0a0a;
}
.dark {
--bg: #0a0a0a;
--fg: #fafafa;
}
```
## Wiring it to Tailwind
Map the variables into your Tailwind config so utilities like `bg-background` resolve to `hsl(var(--background))`. This keeps your markup clean and your themes centralized.
## The payoff
- Instant theme switching with no layout shift
- One source of truth for color tokens
- Works across any framework or even plain HTML
The result is a system that's fast, predictable, and a joy to maintain.