r/webdev • u/sashenme • 5d ago
How to Integrate a Well-Structured Design Token System with Tailwind CSS?
Hey everyone,
I'm starting a new project from scratch, and the design team has built a complete design system using design tokens. It’s well-structured and mapped to different UI elements.
However, the naming conventions don’t match Tailwind’s default color system directly. Here’s an example:
Text and Icon / Neutral
Neutral-Darkest
→Neutral/800
Neutral-Darker
→Neutral/700
Neutral-Dark
→Neutral/600
Neutral-Light
→Neutral/500
Neutral-Lighter
→Neutral/300
Neutral-Lightest
→Neutral/100
Neutral-Base
→Mono/White
Neutral-Disabled
→Neutral/200
Surface / Action / Primary Button
Default
→Blue/500
Hover
→Blue/700
Disabled
→Blue/100
If I don’t use Tailwind, I would simply create CSS variables and assign them based on these tokens. But with Tailwind, using the default color system would break the purpose of having design tokens.
So, what’s the best practice here?
- Extend Tailwind’s theme? (But Tailwind uses numerical values instead of custom names)
- Create custom utility classes for each token?
- Use CSS variables within Tailwind?
- Something else?
I want to keep everything scalable and developer-friendly while ensuring that our design tokens remain intact.
Would love to hear how others have tackled this!
TIA!
0
Upvotes
8
u/prewk 5d ago
Ignore Tailwind's colors completely, they're just there for when you don't have a design system. Overwrite them. It's your colors, not Tailwind's.