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
classNameandclassattributes - 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]withw-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 bew-80(320px, close enough and on-scale) -
bg-[#fdfdfd]→ should bebg-whiteorbg-neutral-50 -
text-[14px]→ should betext-sm -
text-[#111111]→ should betext-gray-900 -
mt-[12px]→ should bemt-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.
I'm actively building this out — next up is duplicate class detection and file upload support. What other checks would save you time? Let me know in the comments.
Top comments (0)