How to Convert Tailwind HTML to Structured, Semantic CSS (Without a Full Rewrite)

Eidon Ze — Sat, 08 Aug 2026 07:40:19 +0000

How to Convert Tailwind HTML to Structured, Semantic CSS (Without a Full Rewrite)
I've been using Tailwind for about two years across a handful of projects. It's fast, it's predictable, and once the muscle memory kicks in you can style things without switching files.
But here's what I kept running into:
That component you built six months ago? The one with ⁠flex items-center justify-between p-4 bg-white rounded-lg shadow-md⁠ on the outer div, plus another half-dozen classes on each child element? When you come back to refactor it, you're reading styling before you're reading structure. And if you want to move that component into a project that doesn't use Tailwind — or hand it off to someone who doesn't know the utility vocabulary — you're stuck.
The tooling gap
I went looking for something that could take a chunk of Tailwind-styled HTML and give me back clean, semantic CSS. Not one-to-one class translation (there are a dozen tools that do ⁠px-4 → padding: 1rem⁠). I wanted something that understood the component structure — that a button inside a card should become ⁠.card-button⁠, not ⁠.element-4⁠.
What I found:
One-to-one converters — great if you just need to know what ⁠gap-4⁠ compiles to, but they output ⁠.element {}⁠ ⁠.div {}⁠ flat rules with no hierarchy
StyleLens (VSCode) — finds duplicate utility patterns and suggests refactoring into ⁠@apply⁠, but it's an editor workflow, not an export tool
Tailwind's own ⁠@apply⁠ — moves the problem from the HTML to the CSS file but doesn't change the naming problem
None of them did what I actually wanted: paste some HTML, get back component-level CSS with meaningful class names.
What I ended up building
Since I couldn't find it, I put together a minimal tool that does exactly that. The idea is simple:

Parse the HTML tree
Translate every Tailwind class to its CSS equivalent
Group declarations by component (the tree structure tells you what belongs where)
Name things based on what they are — semantic tags like ⁠h2⁠ become ⁠.card-title⁠, buttons become ⁠.card-button⁠, etc. Here's what it looks like in practice. Input: < img class="w-full h-48 object-cover" src="img.jpg" />
Card Title

Description goes here.
Get Started 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); overflow: hidden; }

.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-description {
margin-top: 0.5rem;
color: #4b5563;
}

.card-button {
margin-top: 1rem;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background-color: #2563eb;
color: #ffffff;
border-radius: 0.25rem;
}

.card-button:hover {
background-color: #1d4ed8;
}

What happens when 4 competing products all stumble at the same time

Eidon Ze — Sun, 02 Aug 2026 04:47:49 +0000

I've been researching the freelancer client portal space for a side project, and I stumbled into something I didn't expect.

In the last 12 months:

HoneyBook raised prices and got flooded with 1-star reviews for crashing
Fiverr shut down AND.CO entirely — tens of thousands of users had to leave
Dubsado's setup process is so complex people hire $500+ consultants
Bonsai got acquired and went radio silent on product updates

Four products, four different problems, all happening at once.

It got me thinking — if you were going to build a client portal today, what would you actually include? I've been talking to freelancers and the answer keeps coming back to like four features: project status, file sharing, invoices, messages. That's it. No CRM pipelines, no workflow automations, no "enterprise plan."

So I threw up a landing page to see if anyone cares. It's called ClientDash — one link per client, $49 one-time, no subscription.

Link: https://peppy-pegasus-d7ec4a.netlify.app/

I'm not sure if this is a real window or just a coincidence I'm reading too much into. Curious what people here think — is the client portal space actually underserved, or are freelancers just fine with Google Docs + email?

ReceiptRadar — Auto-extract every receipt from your Gmail inbox

Eidon Ze — Sat, 01 Aug 2026 11:38:46 +0000

DEV Community: Eidon Ze

How to Convert Tailwind HTML to Structured, Semantic CSS (Without a Full Rewrite)

Card Title

What happens when 4 competing products all stumble at the same time

ReceiptRadar — Auto-extract every receipt from your Gmail inbox