TL;DR: I built a VS Code extension that shows the design token behind a Tailwind class instantly, so you never have to dig through config files to find it.
Why I built it
I worked on multiple client projects. A common part of building a design system or UI is checking that values from Figma match the design tokens used in the project. For many clients, we build custom tokens: colors, spacing, radius, typography.
Before final review or QA, this becomes tedious. You have to search for the token in your code, find its value, and match it against Figma manually.
The gap
Tailwind's own extension only covers native classes. It does not support custom tokens. So I built one that does, for both Tailwind v3 and v4.
The idea is simple: hover on a custom class, see the design token behind it.
What it helps with
- Shows the design token behind a Tailwind class directly on hover, no manual searching through config files
- Works with Tailwind v4's new
@themeconfig - Catches token mismatches before code review or QA
- Speeds up UI integration work on client design systems
- Reduces tool switching during implementation. You still check Figma, but less often and faster
Try it
It is live now on VS Code Marketplace and Open VSX.
Top comments (0)