Tracewind

Hover any element on a live page to read its layout, spacing and effects, then copy it as React and Tailwind CSS.

Tracewind answers one question the browser inspect panel does not: how is this laid out? See something you like on a website? Click the Tracewind icon, hover it, and click to lock it. A panel shows how it is built and gives you the code for the whole thing, contents included. WHAT YOU GET - Measurements in plain terms: size, layout type, gap, padding, radius, border, fill, backdrop blur, shadow, text and transition. - How the element sits in its parent: which grid columns it spans, or its place in a flex row or column. - The whole component as React with Tailwind CSS v4 classes: its text, images, buttons and everything inside, ready to copy. Values on the Tailwind scale use the scale. Values off the scale are kept exact. - React or plain HTML: switch tabs to copy the same component either way. - Spacing drawn on the page: padding is shaded and labelled right on the element. - A library inside the panel. Save a capture to a project, see a picture of each one, then search, copy or delete it later. HOW TO USE IT 1. Click the Tracewind icon, or press Alt+Shift+C. 2. Hover to outline an element. Click to lock it. 3. Use Parent and First child (or the Up and Down keys) to move through the layout. 4. Press Copy code, or press Save and choose a project. 5. Open the Library tab to find what you saved. 6. Press Esc to release, and Esc again to exit. PRIVATE BY DESIGN Tracewind runs only on the tab where you start it. Your library, including the small picture of each capture, is stored inside your browser. The extension makes no network requests, has no account and no analytics. GOOD TO KNOW - Output targets React and Tailwind CSS v4. - It reads computed styles, so it works on any site whatever built it. Responsive variants such as md: cannot be recovered from computed styles, so the code reflects the page at its current width. - Image addresses in the copied code point at the original site. Swap in your own images before you publish. - Very large sections are trimmed to keep the code readable. Capture a smaller part for the full detail. - Content inside cross-origin iframes and closed shadow roots cannot be read by any extension.