Back to Workshop resources
Claude Code1 min read
Claude Code + Tailwind — keeping the design clean.
Tailwind utilities are great until they're a mess. Here's how to keep Claude Code from sprawling.
Overview
Claude Code defaults to Tailwind for styling because it's the path of least resistance. Without guardrails, you end up with utility-class sprawl that's hard to refactor.
Define design tokens
Set CSS variables for your palette, font sizes, and spacing in globals.css. Tell Claude to reference them via Tailwind's arbitrary value syntax (
bg-[var(--accent)]) or via tailwind.config.ts extensions.Component-extract when classes pile up
When a button has 10+ utility classes used in 4 places, extract into a Button component. Tell Claude this rule in CLAUDE.md and it'll do the extraction proactively.
One file of custom CSS is fine
Don't fight Tailwind religion. A single globals.css with reusable component classes (.card, .btn-primary, .h1) is cleaner than 47 utility classes per element.
PreviousClaude Code + TypeScript — small adjustments that pay off.Next Vibe coding without coding — what that actually means.
Want to Apply This to Your Business?
We're a Singapore AI development and automation agency. Let's discuss how we can help solve your specific challenges.