Xtractlytractly

Tailwind v3 · Tailwind v4 · HTML · React · Vue · Svelte

Convert any website toTailwind CSS

Point Xtractly at a button, card or whole section and it writes the Tailwind classes for it — generated from the element's computed styles, with hover and responsive rules turned into variants. On sites already built with Tailwind, it recognises and keeps the original utilities.

Install ExtensionRead the docs

Free with an account · Chrome, Edge & Brave

01

Set Tailwind as your styling

In the extension's Settings, choose Tailwind as the styling format. It applies to HTML, React, Vue and Svelte exports alike.

02

Extract an element

Hover and click anything on the page. Xtractly walks the element tree and converts each node's styles into utilities.

03

Paste into your project

You get class-only markup. Only @font-face and @keyframes, which Tailwind can't express as classes, ride along in a style tag.

Built for the code you actually ship

  • v3 and v4 safe

    Classes are chosen to be valid on both Tailwind v3 and v4, using arbitrary values where the two scales differ.

  • Variants, not flattening

    Hover styles become hover: classes and media queries become sm:/md:/lg: variants, so the component still responds.

  • Recognises existing Tailwind

    If the source page already uses Tailwind, Xtractly keeps the authored utility classes instead of regenerating them.

  • Arbitrary values when needed

    Exact colours, sizes and shadows that aren't on the default scale come out as exact arbitrary-value classes rather than being rounded off.

Frequently asked questions

Does it output Tailwind v3 or v4?

Both. The generated classes are picked to work on either version; where the default scales differ, Xtractly uses an arbitrary value so the result looks the same in both.

What happens to styles Tailwind can't express?

Values off the default scale become arbitrary-value classes. Font faces and keyframe animations, which have no class equivalent, are included in a small style block.

Can I get a site's colours as a Tailwind config?

Yes — the Design System panel exports a page's palette as a Tailwind config or as CSS variables.

Works well together

Copy any website component as real code

Learn more about copy any website component as real code

Click any element on a live site and get it back as HTML, React, Vue or Svelte.

Turn any website into React components

Learn more about turn any website into React components

Capture a section as a React (or Vue/Svelte) component and keep iterating on it.

Extract colors from any website

Learn more about extract colors from any website

Every colour on the page, ranked — copy as HEX/RGB/HSL/Tailwind or export a palette.

Export settings in the extensionXtractly vs ColorZillaXtractly vs DivMagic

Start today for free

Upgrade when you need more — monthly, yearly, or once for life.

Join Xtractly

Start without a card

Free covers inspecting, capturing and 5 exports a month.

Cancel anytime

No hidden fees. Or pay once for Lifetime and skip renewals.

Clear pricing, no surprises

ProMost popular
$4.99/month

Billed monthly. Cancel anytime.

Upgrade to Pro
  • Everything in Free
  • Unlimited exports — code, Figma & design tokens
  • Save captures to your library & edit them in Studio
  • Full page export & copy
  • Bookmarks
  • REST API access & keys
  • Unlimited Agent Bridge saves
  • Every feature we ship going forward
  • Priority support