CSS Inspector: Copy Any Element to Tailwind

Hover any element to see its real CSS. Copy it as clean HTML + CSS or Tailwind, with fonts, colors and spacing. Built for devs.

See the CSS that actually styles any element — and copy it as code you can paste. 🖱️ HOVER & CLICK TO INSPECT Press Alt+Shift+C (or click the toolbar icon) and hover any element: margin, border, padding and content boxes light up, with size and font at a glance. Click to lock it. Use ↑ / ↓ to walk to the parent or first child. Esc to exit. 🧾 THE CSS THE AUTHOR WROTE, NOT 300 DEFAULTS Browser defaults are stripped, longhands collapse into shorthands, and centred blocks come out as margin: auto instead of pixel values. Content-derived heights are left out so components stay fluid when you paste them. 🎨 COLORS & CONTRAST Text and effective background colors with the WCAG contrast ratio and AA pass/fail. 📋 COPY AS • CSS for one element (free, unlimited) • Tailwind classes for one element (free, unlimited) • A whole component as HTML + scoped CSS, Tailwind HTML, or a React JSX component 🧩 DESIGN TOKENS (Pro export) Extract the colors, type scale, spacing and radii a page uses. Export as a Tailwind config, CSS variables or Figma Tokens JSON. PRICING • Every new install gets 3 days of Pro, free. • Free: inspector, single-element CSS and Tailwind, 20 component copies per month • Pro (30 days, 1 year or lifetime): unlimited component copies and token export. No subscription: renewals extend the same license key. Payments by Shopier. PRIVACY Runs only when you start it on a tab (activeTab). Page content is processed locally and never sent anywhere. We only check your license with a random installation ID.