Tailwind2CSS

Paste Tailwind HTML, get structured semantic CSS back — with component-level class names like .card .card-title .card-button instead of .element .div.

Most Tailwind→CSS converters give you flat, mechanical output: .element { display: flex; padding: 1rem; } .div { margin: 0.5rem; }. This tool walks the HTML tree and groups styles by component structure — buttons inside cards become .card-button, responsive variants output @media blocks, hover states produce proper :hover selectors.

Live demo →

Or open index.html directly in your browser — everything runs client-side, no build step required.

• 200+ common Tailwind v3 utilities (layout, spacing, typography, colors, borders, shadows)
• Responsive prefixes (sm: md: lg: xl:) → @media blocks
• Pseudo-classes (hover: focus: active:) → proper CSS selectors
• Semantic naming based on HTML tags and DOM context
• Component grouping (nested elements are named as children of their parent)

• JSX/TSX/Vue syntax (plain HTML only)
• Arbitrary values like w-[300px]
• Custom Tailwind config themes
• Manual naming override (all automatic for now)

"I would love a tool that could reverse-engineer the TW classes from the source, collapse the obvious ones, and give me an approximation of a good CSS architecture." — a Hacker News commenter describing exactly this problem

If you've used Tailwind on a project for more than a year, you know the tradeoff: authoring speed vs. long-term readability. This tool doesn't take a side in that debate — it just gives you an exit ramp when you need one.

Paste HTML in the left panel. Structured CSS appears in the right panel. Click Download or Copy.

<!-- Input -->
<div class="max-w-sm mx-auto bg-white rounded-xl shadow-lg">
  <img class="w-full h-48 object-cover" src="img.jpg" />
  <div class="p-6">
    <h2 class="text-xl font-bold text-gray-900">Title</h2>
    <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Action</button>
  </div>
</div>

/* Output */
.card {
  max-width: 24rem;
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.card-image { width: 100%; height: 12rem; object-fit: cover; }
.card-body { padding: 1.5rem; }
.card-title { font-size: 1.25rem; font-weight: 700; color: #111827; }
.card-button { margin-top: 1rem; padding: 0.5rem 1rem; background-color: #2563eb; color: #fff; border-radius: 0.25rem; }
.card-button:hover { background-color: #1d4ed8; }

tailwind to css converter, tailwind html to semantic css, convert tailwind to vanilla css, tailwind class extractor, structured css from tailwind

MIT