Back to Exercises
Craft beginner 20 min

Token Migration

Convert Tailwind design utilities to Canon CSS variables.

Objectives

  • Identify Tailwind design utilities (colors, shadows, radii)
  • Find corresponding Canon tokens
  • Migrate while preserving layout utilities

Beads Tasks

Create these tasks in Beads before starting. You learn Beads by using Beads.

bd create "Praxis: Migrate [file] from Tailwind to Canon" --type=task--labels=learn,craft
bd create "Audit file for design utilities (colors, shadows, radii)" --type=task--labels=learn
bd create "Create mapping: Tailwind → Canon tokens" --type=task--labels=learn
bd create "Apply migration, preserve layout utilities" --type=task--labels=learn

Claude Code Prompt

Copy this prompt into Claude Code to build YOUR own version:

## Setup: Track this exercise with Beads

```bash
bd create "Praxis: Migrate [file] from Tailwind to Canon" --type=task --labels=learn,craft
bd create "Audit file for design utilities (colors, shadows, radii)" --type=task --labels=learn
bd create "Create mapping: Tailwind → Canon tokens" --type=task --labels=learn
bd create "Apply migration, preserve layout utilities" --type=task --labels=learn
```

---

Help me create MY design token system (my own "Canon CSS").

I'm building a semantic design token system for my project. Guide me through:

1. **Audit [FILE]** for Tailwind design utilities:
   - Colors (bg-*, text-*, border-*)
   - Shadows (shadow-*)
   - Border radii (rounded-*)
   - Typography (text-sm, text-lg, font-*)

2. **Define MY tokens**:
   - Background colors: --color-bg-*
   - Foreground colors: --color-fg-*
   - Border colors: --color-border-*
   - Shadows: --shadow-*
   - Radii: --radius-*
   - Typography: --text-*

3. **Create the migration**:
   - Map each Tailwind utility to my semantic token
   - Preserve Tailwind layout utilities (flex, grid, p-*, m-*, etc.)
   - Apply the changes

4. **Document MY Canon**:
   - Create a CSS file with my token definitions
   - Include comments explaining each token's purpose

The file to migrate: [YOUR_FILE_PATH]
My brand colors/preferences: [YOUR_BRAND_INFO]

Your Solution

Write code that addresses the objectives above. Apply the principles from the Craft path.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Review the lesson