# How to Extract and Sync Tailwind.config Tokens to style-guide.json

> Learn how to extract and sync Tailwind.config tokens to style-guide.json with the Stitch Skills workflow. Automate design token management for your React components.

- Repository: [Google Labs Code/stitch-skills](https://github.com/google-labs-code/stitch-skills)
- Tags: how-to-guide
- Published: 2026-07-12

---

**The Stitch Skills repository provides a built-in workflow that extracts design tokens from your `tailwind.config` file and syncs them to [`resources/style-guide.json`](https://github.com/google-labs-code/stitch-skills/blob/main/resources/style-guide.json) by auto-detecting the config, injecting it into generated HTML, and updating the JSON file consumed by the React-components skill.**

The `google-labs-code/stitch-skills` repository includes an automated pipeline for design token extraction. When you need to extract and sync Tailwind.config tokens to style-guide.json, the system reads your project's Tailwind configuration and updates the style guide used by downstream React components.

## How the Token Extraction Pipeline Works

### Step 1: Detect the Tailwind Configuration File

The extraction process begins in [`plugins/stitch-design/skills/extract-static-html/scripts/extract_inline_html.ts`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/extract-static-html/scripts/extract_inline_html.ts), where the script searches for [`tailwind.config.js`](https://github.com/google-labs-code/stitch-skills/blob/main/tailwind.config.js), [`tailwind.config.ts`](https://github.com/google-labs-code/stitch-skills/blob/main/tailwind.config.ts), `tailwind.config.mjs`, or `tailwind.config.cjs`. If you omit the `--tailwind-config` flag, the script auto-detects the file and logs the path to the console with the message `Auto-detected Tailwind config: …`.

### Step 2: Extract Token Values from the Config

Once located, the script reads the Tailwind config file, strips the module-export wrapper (`export default` or `module.exports`), and injects the raw configuration into the generated HTML as a `<script type="text/tailwindcss">` block around lines 919-923. This script block contains the full `theme` definition including colors, spacing, and typography values that the React-components skill later parses.

### Step 3: Sync Tokens to style-guide.json

The React-components skill expects these tokens in [`plugins/stitch-build/skills/react-components/resources/style-guide.json`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/react-components/resources/style-guide.json). The file follows this structured format:

```json
{
  "theme": {
    "colors": { "primary": "#…", "background": { "light": "#…", "dark": "#…" } },
    "typography": { "display": [ "Font A", "fallback" ], "icons": "…" },
    "spacing": { "header-h": "72px", "container-max": "960px" }
  }
}

```

Replace these values with the tokens extracted from your Tailwind config to complete the synchronization.

## Command-Line Workflow to Extract and Sync Tokens

Run the static HTML extractor to auto-detect your Tailwind config:

```bash
npx tsx plugins/stitch-design/skills/extract-static-html/scripts/extract_inline_html.ts \
  --page src/MockPage.jsx:home.html:"Home Page" \
  --outdir .stitch

```

The generated HTML in `.stitch` now contains a `<script type="text/tailwindcss">` block with the full config. Extract the `theme` object and update the style guide:

```bash
cat <<EOF > plugins/stitch-build/skills/react-components/resources/style-guide.json
{
  "theme": {
    "colors": {
      "primary": "#YOUR_PRIMARY",
      "background": {
        "light": "#YOUR_LIGHT_BG",
        "dark": "#YOUR_DARK_BG",
        "elevated": "#YOUR_ELEVATED_BG"
      },
      "accent": {
        "purple": "#YOUR_PURPLE",
        "lavender": "#YOUR_LAVENDER"
      }
    },
    "typography": {
      "display": [ "YOUR_FONT", "sans-serif" ],
      "icons": "YOUR_ICON_FONT"
    },
    "spacing": {
      "header-h": "YOUR_HEADER_HEIGHT",
      "container-max": "YOUR_MAX_CONTAINER"
    }
  }
}
EOF

```

According to [`plugins/stitch-build/skills/react-components/SKILL.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/react-components/SKILL.md), this satisfies the gate check: "Phase 2 is complete ONLY when [`resources/style-guide.json`](https://github.com/google-labs-code/stitch-skills/blob/main/resources/style-guide.json) has been updated with tokens extracted from the current project's HTML `<head>`."

## Key Files in the Token Sync Process

- **[`plugins/stitch-design/skills/extract-static-html/scripts/extract_inline_html.ts`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/extract-static-html/scripts/extract_inline_html.ts)**: Detects and reads the Tailwind config, then injects it into generated HTML as a `<script type="text/tailwindcss">` block.

- **[`plugins/stitch-build/skills/react-components/resources/style-guide.json`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/react-components/resources/style-guide.json)**: Stores the synced token map consumed by the React-components skill.

- **[`plugins/stitch-build/skills/react-components/resources/stitch-api-reference.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/react-components/resources/stitch-api-reference.md)**: Documents the expected `<script type="text/tailwindcss">` format and token mapping for the React-components skill.

- **[`plugins/stitch-build/skills/react-components/SKILL.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/react-components/SKILL.md)**: Describes the gate that enforces the sync of [`style-guide.json`](https://github.com/google-labs-code/stitch-skills/blob/main/style-guide.json) before Phase 2 completion.

## Summary

- The extraction script auto-detects `tailwind.config.{js,ts,mjs,cjs}` files when the `--tailwind-config` flag is omitted.
- The config gets injected into HTML as a `<script type="text/tailwindcss">` block containing the full `theme` object.
- You must manually update [`plugins/stitch-build/skills/react-components/resources/style-guide.json`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/react-components/resources/style-guide.json) with the extracted tokens to satisfy the React-components skill gate check.
- This workflow ensures that `twMerge` utilities and other downstream components receive the correct design tokens for your project.

## Frequently Asked Questions

### What file formats does the auto-detection support?

The script in [`extract_inline_html.ts`](https://github.com/google-labs-code/stitch-skills/blob/main/extract_inline_html.ts) recognizes [`tailwind.config.js`](https://github.com/google-labs-code/stitch-skills/blob/main/tailwind.config.js), [`tailwind.config.ts`](https://github.com/google-labs-code/stitch-skills/blob/main/tailwind.config.ts), `tailwind.config.mjs`, and `tailwind.config.cjs`. It logs the auto-detected path to the console when found.

### Where does the extracted Tailwind config get injected?

The script strips the module-export wrapper and injects the raw configuration into the generated HTML as a `<script type="text/tailwindcss">` block, as documented in [`stitch-api-reference.md`](https://github.com/google-labs-code/stitch-skills/blob/main/stitch-api-reference.md). This block contains the complete `theme` definition including colors, spacing, and typography.

### How do I verify the sync was successful?

Check that [`plugins/stitch-build/skills/react-components/resources/style-guide.json`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/react-components/resources/style-guide.json) contains the updated token values from your Tailwind config. According to [`SKILL.md`](https://github.com/google-labs-code/stitch-skills/blob/main/SKILL.md), the React-components skill explicitly requires this file to be updated with tokens extracted from the project's HTML `<head>` to complete Phase 2.

### Can I use a custom Tailwind config path?

Yes. While the script auto-detects standard config file names, you can specify a custom path using the `--tailwind-config` flag when running [`extract_inline_html.ts`](https://github.com/google-labs-code/stitch-skills/blob/main/extract_inline_html.ts).