CSS to Tailwind Token Mapping

Translate raw CSS computed values extracted from a live site into Tailwind CSS variables and utility classes.

Colours

rgb() / rgba() → HSL CSS variable

Tailwind v4 uses HSL for semantic tokens. Convert extracted rgb() values:

Quick HSL converter (run in browser):

function toHsl(rgb) {
  const [r, g, b] = rgb.match(/\d+/g).map(Number).map(n => n / 255);
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;
  if (max === min) { h = s = 0; }
  else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
      case g: h = ((b - r) / d + 2) / 6; break;
      case b: h = ((r - g) / d + 4) / 6; break;
    }
  }
  return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
}

Semantic token assignment

Map extracted colours to these standard tokens:

Token Decision Tree

When a colour does not obviously map to a single token, walk this tree:

Is it the most prominent interactive colour (CTA button bg, main link)?
  YES → --primary
  NO ↓

Is it used on a second type of button or a less prominent interactive element?
  YES → --secondary
  NO ↓

Is it used for hover states, tag backgrounds, or inline highlights only?
  YES → --accent
  NO ↓

Is it a subtle background (sidebar, card surface, input field bg)?
  YES → --muted  (text on it → --muted-foreground)
  NO ↓

Is it used on borders, dividers, or form input outlines?
  YES → --border
  NO ↓

Is it the page-level background?
  YES → --background  (text on it → --foreground)
  NO → define a custom token (e.g. --surface, --panel, --hero-bg)

Tie-breaking rules:

• --secondary vs --accent: prefer --accent for decorative hover/highlight effects; use --secondary when the element has an interactive affordance (click, focus, etc.).
• :hover colours: getComputedStyle may silently return the resting state if the pointer is not physically over the element. Always verify against the base state.
• Dark mode: if extraction was performed with the OS in dark mode, all background/foreground values will be dark-mode variants. Re-extract in light mode or document which mode was active in docs/theme/overview.md.
• Colours appearing only in @media (prefers-color-scheme: dark) blocks belong in docs/theme/dark-mode.md, not the main token map.

Typography

Font family

Define in @theme inline:

@theme inline {
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

Font size scale

Map extracted px values to Tailwind size tokens:

If the site uses a non-standard scale, define custom tokens:

@theme inline {
  --text-display: 3.5rem;
}

Font weight

Line height

Spacing

Map extracted px values to Tailwind spacing scale (1 unit = 0.25rem = 4px):

For non-standard values, use CSS variables:

@theme inline {
  --spacing-section: 5rem; /* 80px */
}

Border Radius

Define a project-wide radius token:

:root {
  --radius: 0.5rem; /* matches the site's rounded-lg */
}
@theme inline {
  --radius-default: var(--radius);
}

Shadows

For custom shadows, extract the exact box-shadow value and define:

@theme inline {
  --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

Complete src/index.css Template

@import "tailwindcss";

/* ── Semantic tokens ── */
:root {
  /* Colours (fill from extraction) */
  --background:           hsl(0 0% 100%);
  --foreground:           hsl(221 39% 11%);
  --primary:              hsl(174 90% 31%);
  --primary-foreground:   hsl(0 0% 100%);
  --secondary:            hsl(210 40% 96%);
  --secondary-foreground: hsl(222 47% 11%);
  --muted:                hsl(210 40% 96%);
  --muted-foreground:     hsl(215 16% 47%);
  --accent:               hsl(210 40% 96%);
  --accent-foreground:    hsl(222 47% 11%);
  --destructive:          hsl(0 84% 60%);
  --destructive-foreground: hsl(0 0% 100%);
  --border:               hsl(214 32% 91%);
  --ring:                 hsl(174 90% 31%);
  --card:                 hsl(0 0% 100%);
  --card-foreground:      hsl(221 39% 11%);

  /* Shape */
  --radius: 0.5rem;
}

/* ── Map to Tailwind utilities ── */
@theme inline {
  --color-background:           var(--background);
  --color-foreground:           var(--foreground);
  --color-primary:              var(--primary);
  --color-primary-foreground:   var(--primary-foreground);
  --color-secondary:            var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted:                var(--muted);
  --color-muted-foreground:     var(--muted-foreground);
  --color-accent:               var(--accent);
  --color-accent-foreground:    var(--accent-foreground);
  --color-destructive:          var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border:               var(--border);
  --color-ring:                 var(--ring);
  --color-card:                 var(--card);
  --color-card-foreground:      var(--card-foreground);

  /* Typography */
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* ── Base styles ── */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
}