Tailwind Inspector

Inspect and display Tailwind CSS classes applied to any element on hover.

Tailwind Inspector is a developer tool that lets you instantly see which Tailwind CSS classes are applied to any element on a webpage — just hover over it. ✦ HOW IT WORKS Enable the extension from the popup, then move your cursor over any element on the page. A sleek overlay appears showing all Tailwind utility classes detected on that element, neatly grouped by category. ✦ CLASS GROUPS · Layout — flex, grid, position, overflow, z-index, etc. · Spacing — padding, margin, gap, width, height, etc. · Typography — font, text size, leading, tracking, etc. · Color — background, text color, border color, gradients · Effects — shadow, opacity, blur, transition, animation ✦ KEY FEATURES · Works with Tailwind CSS v2, v3, and v4 · Detects classes from local stylesheets AND CDN-hosted bundles · Click any class chip to copy it to clipboard instantly · Press Space to pin/freeze the overlay so you can interact with it · Press Escape to dismiss · Element highlight border shows exactly which element is inspected · Shadow DOM isolation — zero interference with page styles · Toggle on/off per-tab from the extension popup · Lightweight — no external dependencies, no data collected ✦ PERFECT FOR · Debugging Tailwind layouts · Reverse-engineering a design without opening DevTools · Learning Tailwind by inspecting real-world examples · Quickly copying utility classes from one project to another No data is collected. Nothing leaves your browser.