Export a component

Pin a component, then send it to CodePen, copy it as an HTML snippet, or — on a Tailwind site — copy it as clean Tailwind. Tokens and fonts travel with it.

How it works

Pin any element, then open the Tools popover and choose Export to CodePen. WhatTheCSS walks the whole subtree and assembles a self-contained payload: the markup, the matched rules, the :root tokens it depends on, @media overrides, ancestor inheritance, and matched @font-face rules. Asset URLs are absolutized so images and fonts still load at the destination.

HTML snippet

Prefer not to use CodePen? Choose Copy as HTML snippet instead. You get a paste-anywhere block with the <link> and <style> already wired, rendering identically to the source.

Tailwind

Inspecting a Tailwind site? Choose Copy as Tailwind. Because the destination’s Tailwind regenerates the utility CSS from the class names, the expanded stylesheet is dead weight there. This target ships the clean class markup plus the :root design tokens it references (so any custom var(--…) still resolves) and skips the @layer utility rules — the way you’d actually want to paste it into a Tailwind project.

It appears only when WhatTheCSS detects a Tailwind component; on other sites the row is blurred, because converting arbitrary CSS to Tailwind would produce a wall of arbitrary-value classes (p-[55px]) that reads worse than the HTML/CSS export. Use CodePen or the HTML snippet there.