Skip to main content

Design Tokens in Tailwind: A System That Scales

1 min read
tailwind css design

The problem

A growing codebase had colors spread across text-blue-600, bg-blue-100, and border-blue-500 with no relationship between them. Rebranding would be a nightmare.

Design tokens approach

/* globals.css */
@theme {
  --color-brand: #2563eb;
  --color-brand-light: #dbeafe;
  --color-brand-dark: #1e40af;
  --color-accent: #f59e0b;
  --color-surface: #ffffff;
  --color-surface-muted: #f8fafc;
  --color-border: #e2e8f0;
}
<!-- Before -->
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">

<!-- After -->
<button class="bg-brand hover:bg-brand-dark text-white px-4 py-2 rounded-lg">

The benefit

When the brand color shifts from blue to teal, it’s one file change instead of 47 search-and-replaces.

What I learned

Design tokens are an investment in future you. They feel like overhead on day one and feel like magic on day 200. Start with colors and spacing — those are the highest-churn values in any design system.