See every raw Tailwind class on the page — instantly

Migrating a codebase from raw Tailwind to a component library — or just keeping one honest — means finding where px-4 flex gap-2 is still sprinkled through the markup instead of a proper component. Grep only sees source; it can't tell you what's actually rendered. Loupe is a Chrome extension that highlights raw Tailwind utilities right on the live page.

How Tailwind Xray works

1. Enable Loupe on any page (click the icon or Alt+Shift+K).
2. Press S for Tailwind Xray. Loupe scans every element and highlights the ones carrying raw Tailwind utility classes.
3. Hover a highlight to see exactly which classes matched.
4. Add your brand prefixes to the allowlist — Loupe skips your design-system classes so only the raw utilities that need replacing stay lit up.

Why it's useful

• Design-system migration — see the real surface area of raw utilities left to convert, at a glance, per page.
• Brand compliance — spot where teams reached for a one-off utility instead of the sanctioned component.
• Framework-agnostic — it reads the rendered DOM, so it works no matter how the classes got there.

Goes further: design-system profiles

Load a design-system profile and Loupe graduates from "raw Tailwind" to full token awareness — inspect any element to see which design token it uses, inventory your components, and (Pro) lint the whole page for raw colors, rogue spacing, and deprecated tokens.

FAQ