DEV Community

CapiLabs
CapiLabs

Posted on

How to Extract Tailwind CSS Configs and Figma Tokens from Any Site in 1 Click

#css #tailwindcss #webdev #javascript

Every developer and designer has been there: you stumble upon a beautifully designed website and want to reverse-engineer its design tokens or inspect how its typography, color palette, and utility classes are structured.

Normally, this means opening DevTools, inspect-elementing dozens of DOM nodes one by one, manually copying computed HEX codes or CSS --variables, and spending 30 minutes manually formatting a tailwind.config.js or syncing values into Figma.

I got tired of this repetitive manual process, so I built a privacy-first browser tool to automate it: Token Inspector.

The Problem with Manual Token Inspection

Modern web apps rely heavily on utility-first frameworks like Tailwind CSS or complex CSS custom properties. When inspect-elementing computed styles in DevTools:

  1. Variables are scattered: CSS variables are often spread across :root, body tags, or dynamically injected stylesheets.
  2. Framework Mismatch: Converting raw CSS computed values back into structured framework syntax requires manual guesswork and mapping.
  3. Asset Collection Friction: Extracting inline SVG icons or vector assets requires right-clicking each DOM element, copying outer HTML, and creating individual .svg files manually.

Automating Token Extraction

Token Inspector scans the DOM and active stylesheets of any web page directly in your browser, extracting three major design system components:

1. Production-Ready Tailwind CSS Configurations

Instead of manually guessing color palettes, typography scales, or border-radius rules, the extension parses the computed theme variables and builds a structured tailwind.config.js file:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          500: '#0ea5e9',
          900: '#0c4a6e',
        },
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
      borderRadius: {
        'custom': '12px',
      }
    },
  },
};
Enter fullscreen mode Exit fullscreen mode

  1. Figma Tokens Studio JSON Export
    Bridging the gap between design and production code is always tricky. The extension outputs structured JSON matching the Tokens Studio schema, allowing you to import color palettes and variables directly into native Figma Variables.

  2. Bulk SVG Exporter
    It scans all inline vector elements () across the active document, organizes them, and packages them into a clean .zip download in a single click.

Privacy First: 100% Client-Side Architecture
Security and privacy were top priorities when building this tool. Many web inspection extensions send scraped DOM nodes or telemetry to external backend servers.

Token Inspector executes 100% client-side using standard Web APIs (window.getComputedStyle, DOM Parsing, and Canvas APIs). Zero data leaves your local browser session.

Try It Out & Share Your Feedback
We just launched Token Inspector today on Product Hunt!

If you are a frontend developer, UI/UX designer, or indie builder, I'd love for you to give it a spin, test it on complex production web apps, and let me know your thoughts or edge cases you encounter.

👉 Check out Token Inspector on Product Hunt: https://www.producthunt.com/posts/token-inspector

What does your current design token inspection workflow look like? Let's discuss in the comments below!

Top comments (0)