# How to Extract Tailwind Design Tokens from Stitch HTML for style-guide.json > Extract Tailwind design tokens from Stitch HTML to style-guide.json with this simple two-step process. Automatically detect configurations for colors, spacing, and typography. - Repository: [Google Labs Code/stitch-skills](https://github.com/google-labs-code/stitch-skills) - Tags: how-to-guide - Published: 2026-07-16 --- **Stitch skills automatically detect Tailwind configurations in extracted HTML pages and export color, spacing, and typography tokens to [`resources/style-guide.json`](https://github.com/google-labs-code/stitch-skills/blob/main/resources/style-guide.json) through a two-step extraction process.** The `google-labs-code/stitch-skills` repository provides specialized skills for design system extraction. When working with Tailwind-based projects, you can transform raw HTML snapshots into structured design tokens that downstream build skills consume for component generation. ## Two-Step Extraction Workflow Extracting Tailwind tokens requires sequential execution of two distinct skills. The first creates a self-contained HTML artifact, and the second parses that artifact to generate the token file. ### Step 1: Extract Static HTML Run the **extract-static-html** skill to capture a complete page snapshot. This script inlines Tailwind CSS and detects the project's configuration through the `autoDetectTailwind` utility. During extraction, the script located at [`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) performs three critical operations: - Detects the presence of [`tailwind.config.js`](https://github.com/google-labs-code/stitch-skills/blob/main/tailwind.config.js) or [`tailwind.config.ts`](https://github.com/google-labs-code/stitch-skills/blob/main/tailwind.config.ts) - Inlines Tailwind utility classes into a `