1
Send one URL
One GET request with the page’s address and, if you want, the section by name. No browser to run, no scraper to write.
Design Extraction API
Tailwind API
GET /v1/code25 credits/callTurn any website section into Tailwind CSS
The website to Tailwind converter, as an API: point it at a section of any website and get back markup with utility classes, mapped from the CSS that page really uses.
- 300 free credits a month
- Failed and repeat calls are free
- Works from ChatGPT, Claude and Cursor
Exact
real values, not nearest defaults
md: hover: dark:
variants from the real CSS
Any site
the source need not use Tailwind
How it works
From a URL to code you can paste
2
MiroMiro reads the live page
It loads every stylesheet and works out which rule wins for each element, the way a browser does.
3
Get it back, ready to use
Typed JSON, for 25 credits. A repeat call within 24 hours is free.
stripe.com · pricing section Copy
pricing.html
<div class="rounded-2xl border p-6 md:p-8">
<p class="text-sm text-zinc-500">Pro</p>
<p class="mt-1 text-4xl font-semibold">$29</p>
<ul class="mt-4 space-y-2 text-sm">…</ul>
<button class="mt-6 w-full rounded-full bg-indigo-600
py-2 text-white hover:bg-indigo-700 md:w-auto">
Start free
</button>
</div>
Tailwind code ready to pasteframework=tailwind
One call
The API is the demo
One authenticated GET against any live URL. Typed JSON back.
Website to Tailwind API
GET /v1/codeCoverage
What it captures
Found on the page
- utility classes
- arbitrary values
- md: variants
- hover: variants
- dark: variants
- @keyframes
- section tokens
Formats you can ask for
- framework=tailwind
Why this one
CSS to Tailwind converters need the CSS pasted in, and screenshot tools invent the values. This reads the live page and maps what is really there.
Compare alternativesParameters
What you can pass
Only url is required. Everything else narrows or reshapes the result.
urlrequired
any public URL
The page to extract from. With or without protocol (https:// is assumed).
framework
tailwind (default) · html · jsx · vue · elementor · shopify
The code you get back. tailwind returns markup with utility classes; html returns markup plus a companion stylesheet; jsx returns a React component; vue returns a single-file component.
section
hero · header · footer · pricing · features · testimonials · faq · cta
A part of the page by name, for callers that cannot see its markup (AI agents, mostly).
selector
any CSS selector
The section to extract, e.g. selector=%23hero or selector=.pricing-card - best taken from a previous response's sections list.
name
a component name
Component name for the jsx target - the identifier in "export default function ...".
theme
light (default) · dark
Which colour scheme to extract.
fields
field names
Comma-separated list of fields to return (e.g. fields=code,tokens).
render
true · false (default)
Load the page in a real browser and run its JavaScript before extracting.
fresh
true · false (default)
Skip the 24-hour cache and re-extract from the live page.
screenshot
true · full · false (default)
Requires render=true. The same real browser that renders the page also captures a screenshot - true for the 1440x900 viewport, full for the entire page height.
Every parameter, the response fields and the error codes are in the reference.
Agent-ready
Your agent can call this
“Rebuild the hero section of linear.app in Tailwind in my project.”
Step-by-step setup for your agent
ChatGPT
Claude
Claude Code
Codex
Cursor
Grok Bot
OpenAI dots
MuseUse cases
What you can build
Port a section to your stack
Take a pricing table or hero from a site that is not built with Tailwind and get it as utility classes.
Feed your coding agent real values
Cursor and Claude Code adapt true spacing and colors instead of estimating them from a screenshot.
Migrate off old CSS
Convert the sections of a legacy site one at a time while you move it to a Tailwind codebase.
FAQ
Before you integrate
How does it convert CSS to Tailwind?
It resolves the page’s cascade first: every stylesheet, specificity, media queries and CSS variables. Then it maps each winning declaration to the matching utility. A value that has no stock utility becomes an arbitrary value, such as text-[#0a2540], so the result is exact rather than rounded to the nearest default.
Are responsive and hover styles included?
Yes. Media queries become sm:, md: and lg: variants, state rules become hover: and focus: variants, and a prefers-color-scheme block becomes dark: variants. Pass theme=dark to make the dark version the base.
Does the source site need to use Tailwind?
No. It works from the computed result of any CSS, whether the site was written with Tailwind, plain CSS, Sass or a CSS-in-JS library. Pages that build their styles in the browser need render=true.
What about animations?
The @keyframes a section uses come back in the css field, and the elements carry the matching animate-[…] classes. Add the keyframes to your global stylesheet.
What does it cost?
25 credits per section. Failed and blocked requests are never billed, a repeat call within 24 hours is free, and every key includes 300 free credits a month.
Does it work on sites built with JavaScript?
Yes. The page’s HTML and CSS are read first, which is enough for most sites. When a page only builds itself with JavaScript, or refuses a plain request, it is re-read in a real browser automatically at no extra cost. Add render=true to force the browser, for example for images that load on scroll: that costs 5 extra credits, on every plan including the free key.
Can it read pages behind a login?
No. It reads public pages the way a visitor without an account would see them. Pages that need a sign-in, and addresses on your own machine such as localhost, are out of reach.
Can my AI agent call it without code?
Yes. The same call is the extract_code tool on the MiroMiro MCP server. Connect ChatGPT, Claude, Cursor, Codex or another agent once, with a sign-in and no API key, and ask in plain language.
More about the Website to Tailwind API
Convert a live website to Tailwind CSS
The MiroMiro website to Tailwind API takes a URL and returns a section of that page as markup with Tailwind utility classes. It does not guess from a screenshot. It fetches the page and its stylesheets, runs the cascade to find the declaration that wins for each property on each element, and maps those declarations to utilities.
Clean output, not a class dump
Source class names, data attributes and wrapper divs that carry no styling are removed. Reset rules are left out, because Tailwind’s own base layer already provides them. What is left reads like markup a developer wrote: the structure of the section and the classes that style it.
Built for agents and pipelines
Every response also lists the other sections on the page with a selector for each, so an agent can ask for the pricing table next without seeing the markup. The design tokens the section uses come back alongside the code, ready to drop into a theme.
Get your free API key
300 free credits every month, no credit card. One key unlocks every endpoint - brand, tokens, images, SVGs, fonts, and Lottie. Upgrade only when you outgrow the free tier.