Tailwind Reverse Inspector

Click any element on any page and instantly get the matching Tailwind CSS utility classes.

Tailwind Reverse Inspector lets you click any element on any webpage and instantly see the Tailwind CSS utility classes that reproduce its exact style — no more guessing at spacing, colors, or font sizes by eye. HOW IT WORKS 1. Click the toolbar icon to activate the inspector on the current page. 2. Hover over any element — it highlights as you move. 3. Click it, and the matching Tailwind classes appear instantly in a floating panel. 4. Copy the classes with one click and paste them straight into your code. WHAT IT DETECTS - Box model: margin, padding, width, height - Typography: font size, font weight, text alignment - Colors: background and text color, matched to the nearest Tailwind palette color - Border, radius, and shadow (Pro) - Flex/grid layout, gap, and positioning (Pro) Values that don't match Tailwind's default scale fall back to clean arbitrary-value syntax (e.g. w-[137px]), so you always get a usable class list — never a guess. 100% client-side. No page content, URLs, or data are ever sent anywhere — everything runs locally in your browser. FREE vs PRO The free tier covers box model, size, typography, and color — plenty for everyday use. Pro unlocks border, shadow, and layout utilities plus more precise matching, as a one-time purchase (no subscription). Perfect for developers who want to quickly reverse-engineer a design, match an existing site's look in Tailwind, or just learn what classes produce a given look.