how-to-guide

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

July 12, 2026 google-labs-code/stitch-skills ↗

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 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, where the script searches for tailwind.config.js, 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. The file follows this structured format:

{
  "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:

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:

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, this satisfies the gate check: "Phase 2 is complete ONLY when resources/style-guide.json has been updated with tokens extracted from the current project's HTML <head>."

Key Files in the Token Sync Process

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 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 recognizes tailwind.config.js, 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. 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 contains the updated token values from your Tailwind config. According to 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.

Have a question about this repo?

These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:

Share the following with your agent to get started:
curl -s "https://instagit.com/install.md"
Works with
Claude Codex Cursor VS Code OpenClaw Any MCP Client

Maintain an open-source project? Get it listed too →