How to Convert Any Website to Tailwind CSS

Published July 20, 2026 · 7 min read · by the CSS DNA team

TL;DR: Don't transcribe styles from DevTools by hand. Extract the site's design tokens from its rendered styles, export them as a Tailwind v3 tailwind.config or a Tailwind v4 @theme block, then rebuild components with utilities that reference those tokens.

The wrong way: transcribing DevTools

The naive workflow — inspect an element, read its computed styles, guess the nearest Tailwind class, repeat — has two problems. It's slow, and it silently invents a design system: text-[17px] here, text-[1.06rem] there, three subtly different indigos across the page. You end up with arbitrary values everywhere and no theme at all.

Tailwind works best the other way around: define the theme first, then compose utilities against it.

Step 1: Extract the site's real design system

Open the reference site, run CSS DNA, and click Extract. Because it reads live computed styles, it works on minified CSS and framework-generated class names. You get the page's colors deduped and ranked by usage, its font stacks and type scale, spacing steps, radii, shadows and gradients — the actual system behind the page, not one element's styles.

Step 2: Export for your Tailwind version

Tailwind v3 — tailwind.config

CSS DNA maps the extracted values onto a ready-to-paste config extension:

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        primary: {
          50:  "#f2efff",
          500: "#7c5cff",
          600: "#6d4aff",
          950: "#1b1440",
        },
        surface: "#0a0b10",
      },
      fontFamily: {
        sans: ["Space Grotesk", "system-ui", "sans-serif"],
        mono: ["JetBrains Mono", "monospace"],
      },
      borderRadius: { card: "16px" },
    },
  },
};

Tailwind v4 — CSS-first @theme

Tailwind v4 moved theming into CSS. The same extraction exports as an @theme block:

@import "tailwindcss";

@theme {
  --color-primary-50:  #f2efff;
  --color-primary-500: #7c5cff;
  --color-primary-600: #6d4aff;
  --color-primary-950: #1b1440;
  --color-surface:     #0a0b10;
  --font-sans: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --radius-card: 16px;
}

Every token becomes a utility automatically — bg-primary-600, font-sans, rounded-card — with no JavaScript config at all.

Step 3: Normalize the scale

Raw extractions mirror the source site's inconsistencies. Before committing the theme:

• Collapse near-duplicate colors. If #6d4aff and #6c4bfe both appear, keep one — CSS DNA flags these pairs for you.
• Fill out tonal ramps. Generate a perceptually even 50–950 OKLCH scale from each core color so hover, border and background shades come from the system instead of being improvised later.
• Round the type scale. A scanned scale of 13 / 14.5 / 16 / 22 / 34px usually wants to become a deliberate ratio-based scale.

Step 4: Rebuild components with utilities

With the theme in place, rebuilding is mechanical. For individual elements, CSS DNA's inspect mode can copy any element directly as Tailwind classes or as a ready-to-paste JSX component, so a reference button becomes:

<button class="inline-flex items-center gap-2 rounded-card
  bg-primary-600 px-5 py-3 font-semibold text-white
  shadow-lg shadow-primary-600/30 hover:bg-primary-500">
  Get started
</button>

Because the classes reference your extracted theme, everything stays consistent as the port grows.

Step 5: Audit what you shipped

Finally, check that the converted palette passes accessibility: run a contrast audit across text/background pairs under both WCAG 2 and APCA. If you're not sure which standard to trust, read our WCAG vs APCA comparison.