How to inspect Tailwind CSS classes on any website

Tailwind CSS moved styling out of stylesheets and into markup, and for authors that trade is almost always worth it. For readers, it's another story. Open the Elements panel on a utility-first site and you're met with a wall of class attributes: a dozen tokens per element, responsive prefixes stacked on hover variants, arbitrary values wedged in brackets. The information is all there — it's just not organized for a human trying to answer a question like "why is this card wider than that one?"

If you spend time learning from other people's interfaces, debugging your own, or auditing a teammate's work, being able to read Tailwind quickly is a real skill. Here are the three approaches we see developers use, from the most manual to the most automated.

Chrome's built-in inspector shows you everything, and for a single property question it's fine: select the element, scan the Styles pane, find the winning rule. The friction shows up at the class level. DevTools displays classes as one long string, so grouping them mentally — layout here, typography there, this one only applies at md: — is entirely on you. There's also no notion of your Tailwind theme, so bg-primary is just a class name, not a color you can see.

Verdict: always available, never pleasant. Good for spot checks, exhausting for real reading.

When the site is your own project, jumping to the component in your editor beats squinting at the DOM. Grep for a distinctive class combination and you'll usually land on the right file. The limitation is obvious: it only works on code you have, and it shows you the classes as written — not as they resolve against the live cascade, current breakpoint, and actual rendered box.

This is the itch Winspect exists to scratch. Instead of a wall of text, you hover any element — on any site, including ones you don't own — and get the class list grouped by what it does: spacing, layout, color, typography, effects. Variants and breakpoints are labeled, the box model is drawn over the page with live measurements, and because Winspect understands Tailwind's scales, every value is shown with its meaning, not just its name.

It also solves the problem that stops most tools cold: production sites purge unused CSS, so classes that aren't in the shipped stylesheet simply don't exist there. Winspect compiles utilities at runtime inside the page, which means everything it shows you — and everything you edit — behaves exactly as it would in a dev build.

Whichever route you choose, make reading Tailwind cheap for yourself. The web is full of beautifully built interfaces, and every one of them is a lesson if you can see how it's put together.