0PricingLogin▼
Tailwind CSS Academy · Lesson

Primitive vs Semantic Tokens

Define primitive tokens like color.blue.500 and semantic tokens like color.primary, and map them in the Tailwind config for flexible theming.

What Are Design Tokens?

Design tokens are named values that store the visual decisions of a design system — colors, spacing, font sizes, and more. Instead of hardcoding #3b82f6 throughout your CSS, you give it a name and reference that name everywhere. This creates a single source of truth that is easy to update globally. Tailwind's config is a natural home for design tokens because it generates utility classes from those named values.

Primitive Tokens Defined

Primitive tokens are raw, descriptive values with no semantic meaning attached. They describe what a value is, not where it is used. Examples include color.blue.500, spacing.4, or fontSize.lg. Tailwind's default color palette is built entirely from primitives — blue-500, red-300, and so on. You reference primitives to build the higher-level semantic layer.

// Primitive tokens in tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'blue-brand': '#3b82f6',
        'blue-brand-dark': '#1d4ed8',
        'red-danger': '#ef4444',
        'green-success': '#22c55e'
      }
    }
  }
}

All lessons in this course

  1. Primitive vs Semantic Tokens
  2. CSS Variable-Based Theming
  3. Multi-Brand Theming Strategy
  4. Token Documentation and Governance
← Back to Tailwind CSS Academy