Building a Design System with Tailwind CSS

Tailwind's utility-first approach is powerful, but at scale it needs discipline. Here's how I structure Tailwind for large projects.

Centralise Everything in the Config

Your colours, spacing, fonts, and shadows should all live in tailwind.config.js. If a value isn't in the config, it probably shouldn't exist in the UI.

Use CSS Custom Properties for Theming

Define CSS vars like --accent: #e6a817 and reference them in Tailwind as var(--accent). This lets you swap themes at runtime without class changes.