September 18, 2024
Building a Scalable Design System with Tailwind CSS
How we abandoned messy CSS modules in favor of a strictly tokenized Tailwind config to maintain visual consistency across 7 products.
Tailwind CSS gets a lot of hate for creating "ugly HTML". But when used as an engine for a Design System, rather than just a utility library, it is unparalleled.
We map our Figma design tokens directly into tailwind.config.ts:
theme: {
colors: {
ink: '#111111',
paper: '#F9F9F7',
muted: '#888888'
},
fontFamily: {
display: ['var(--font-anton)', 'sans-serif'],
body: ['var(--font-garamond)', 'serif']
}
}
This ensures that developers physically cannot use a color or font size that isn't part of the design system, enforcing absolute visual consistency across the entire suite of products.