Convert HTML and CSS to Tailwind classes

The page already looks right with a stylesheet or inline styles, but now you need it in Tailwind. Instead of translating every rule by hand, give the converter the URL and get the same HTML back with Tailwind classes on every element.

Two ways in

If the page is live, paste its URL into the converter. That's the entire setup.

If it's a folder on your computer, publish it first. Drop the folder or a zip file onto ship.page to get a https://<slug>.shipped.run link. It's free, requires no account, and stays live for 30 days. Then paste that link into the converter.

Either way, you get a single HTML file back. Stylesheets and style attributes are replaced by the Tailwind classes needed to preserve the design, including media queries and :hover rules. Unused rules are omitted entirely.

What the output looks like

A stylesheet rule, before and after (v4)

/* styles.css */
.button {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 8px;
  background-color: #22c55e;
  font-weight: 600;
  text-decoration: none;
}
.button:hover { background-color: #16a34a; }

<!-- after -->
<a class="button inline-block py-2.5 px-5 rounded-lg bg-[#22c55e]
  font-semibold no-underline hover:bg-[#16a34a]" href="/start">Get started</a>

Pixel spacing maps to Tailwind's scale, so 10px becomes py-2.5. Colors stay exact, the :hover rule becomes a hover: variant, and the original class name remains as a plain hook.

A media query, before and after

.cards { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

<!-- after -->
<section class="cards grid gap-4 grid-cols-[1fr] md:grid-cols-[repeat(3,_1fr)]">

768px matches Tailwind's md: breakpoint, so it becomes md:. Other widths are preserved exactly using variants like min-[992px]:.

Inline styles convert too

<!-- before -->
<p style="padding: 12px; color: #b91c1c; font-weight: 700">

<!-- after -->
<p class="p-3 text-[#b91c1c] font-bold">

Style attributes turn into classes the same way, leaving markup clean.

Publish a local folder from the terminal

cd my-site && zip -qr ../site.zip .
curl -fsS -X POST https://ship.page/deploy \
  -H "Content-Type: application/zip" \
  --data-binary @../site.zip | jq -r .url

Prints a https://<slug>.shipped.run link with no account or key required. Paste it into the converter.

Exports and pricing

Converting is free and requires no account. To copy, download, or deploy the result, sign in with a free account, which includes 3 exports a month. Pro is $4/mo with unlimited exports.

Publishing your files to get a link is free too: anonymous drops stay up for 30 days. Conversion results are kept for 24 hours.

Check before you ship it

Check

Compare the side-by-side screenshots and the match score before exporting to see where the Tailwind version differs from your original.

Check

Hover over links and buttons, then resize the window across your breakpoints to confirm hover states and responsive rules converted cleanly.

Check

Check images and fonts. They still load from their original sources, and dropped files expire after 30 days, so copy assets into your project.

Questions

Can I convert HTML files that aren't online?

Yes. Publish them on ship.page first. It's free, needs no account, and gives you a https://<slug>.shipped.run link that stays up for 30 days. Paste that link into the converter.

Do I need to upload the CSS separately?

No. Publish the HTML and its stylesheets together in the folder structure the page expects, then paste the link. The converter reads whatever CSS the page loads.

Does it convert inline styles?

Yes. Style attributes turn into classes just like stylesheet rules.

Will the classes clash with my existing Tailwind classes?

Turn on the prefix to keep them apart: v4 output uses twfy:flex and v3 output uses twfy-flex. Leave it off for plain class names like flex and p-4.

Is there a free HTML to Tailwind converter?

Yes. Converting is free with no signup. Copying or downloading the HTML requires a free account with 3 exports a month, or Pro at $4/mo for unlimited exports.

Convert your HTML

Paste a URL, or publish your files first to get a link. Converting is free and requires no account.

Open the converter Publish your files