Every project I build uses Tailwind CSS. But without structure, Tailwind can become a mess of utility classes. Here's how I keep things clean.
Design Tokens in tailwind.config
I define all colours, spacing, and font sizes in the Tailwind config. This gives me a single source of truth. When a client wants to change their brand colour, I change one value and it propagates everywhere.
Component Patterns
I build reusable components for buttons, cards, inputs, and sections. Each component has sensible defaults but accepts variants via props. This speeds up every new page.
Spacing & Typography
I use a consistent spacing scale (4, 8, 12, 16, 24, 32, 48, 64) and stick to 2-3 font sizes per page. Constraint breeds consistency.
Dark Mode
With CSS custom properties and Tailwind's dark mode support, switching themes is straightforward. I design dark-first since most developer portfolios and modern apps default to dark.
A good design system isn't about perfection — it's about making the next page faster to build than the last one.