I Built a Tailwind CSS Bloat Scanner — Here's What I Found in My Own Code

Ayman Abdi Mohamed — Mon, 15 Jun 2026 18:43:08 +0000

The problem nobody talks about

I was refactoring a client project last week and realized something uncomfortable: I had 47 arbitrary values scattered across my components. Things like w-[312px], bg-[#fdfdfd], text-[14px], mt-[12px] — hardcoded values that should have been theme tokens from the start.

Every one of those generates a unique CSS rule in production. They don't get deduplicated. They don't benefit from Tailwind's design system. They just silently bloat your bundle.

So I built a tool to catch them automatically.

What TailwindTrimmer does

You paste your JSX, TSX, or HTML into the scanner. It:

Extracts every Tailwind class from your className and class attributes
Flags arbitrary bracket values that should be theme tokens
Scores your overall CSS health (0-100%)
Recommends specific replacements — not vague advice, actual class swaps like "replace w-[312px] with w-80"

The whole thing runs in under a second.

What I found in my own code

I pasted one of my dashboard components and scored 38%. Five arbitrary values flagged in a single component. The tool caught things I'd been visually skipping for weeks:

w-[312px] → should be w-80 (320px, close enough and on-scale)
bg-[#fdfdfd] → should be bg-white or bg-neutral-50
text-[14px] → should be text-sm
text-[#111111] → should be text-gray-900
mt-[12px] → should be mt-3

None of these were intentional design decisions. They were lazy one-off values from moving fast.

The stack (for the curious)

Backend: FastAPI with regex-based class extraction and scoring
Frontend: React + TypeScript + Tailwind v4 (yes, it eats its own dog food)
Hosting: Ubuntu VPS with Nginx reverse proxy

No AI, no LLM calls, no external APIs. Pure parsing. That's why it's fast.

Try it

2 free scans, no signup required:

https://tailwindtrimmer.veltro.co.ke

$16 for unlimited if you find it useful.