patterncsstailwindTip
Design tokens as Tailwind theme values for a single source of truth
Viewed 0 times
design tokensFigmathemesingle source of truthStyle Dictionarydesign system
Problem
Design tokens (colors, typography, spacing) are defined in Figma or a separate design system document but not connected to the Tailwind config. Developers manually translate values, leading to drift between design and implementation.
Solution
Codify design tokens directly in the Tailwind theme (and optionally as CSS custom properties for runtime theming):
For runtime theming, bridge tokens to CSS variables:
Use Style Dictionary or Tokens Studio to automate the design-to-code pipeline.
// tailwind.config.js
const tokens = require('./design-tokens.json'); // exported from Figma via plugin
module.exports = {
theme: {
extend: {
colors: tokens.colors,
fontFamily: tokens.fontFamilies,
spacing: tokens.spacing,
},
},
};For runtime theming, bridge tokens to CSS variables:
:root {
--color-brand-primary: theme('colors.brand.500');
}Use Style Dictionary or Tokens Studio to automate the design-to-code pipeline.
Why
When Tailwind tokens are the source of truth, every utility class is guaranteed to use the official brand value. No hardcoded hex codes or out-of-sync values.
Gotchas
- Token names from design tools often use different naming conventions (camelCase, kebab-case) than Tailwind expects — a transformation step may be needed.
- Semantic tokens (e.g., color.surface.default which maps to a primitive) require an extra layer of indirection in the config.
- In v4, design tokens live in @theme in CSS and are automatically exposed as CSS custom properties, simplifying the bridge.
Context
When integrating a design system or Figma token export into a Tailwind project.
Revisions (0)
No revisions yet.