# Theme Lens: a VS Code extension that shows design tokens on hover

Loubna — Sat, 25 Jul 2026 23:19:36 +0000

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 @theme config
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.

DEV Community: Loubna

# Theme Lens: a VS Code extension that shows design tokens on hover

Why I built it

The gap

What it helps with

Try it