Copy styles as CSS, Tailwind or JSX

1. Open Computed in the Code section.
2. In the bar along the top of the code, choose CSS, Tailwind or JSX.
3. Press the copy button at the end of that bar. It copies what is shown.

CSS shows the computed values above. Tailwind and JSX are for pasting, so they hold only what makes the element look the way it does: declarations that differ from a fresh element of the same tag, and for inherited properties from its parent. The search narrows them too. Duplicates, vendor-prefixed and box-derived properties are left out. Tailwind uses keywords such as flex and items-center where there is one, the default theme's utility where the value lands on Tailwind 4's scale (p-4, rounded-lg, font-semibold, opacity-50), read against the page's own root font size, and exact arbitrary values such as text-[length:14px] where it does not. A named font size is used only with its line height, since it sets one too. JSX is a style object in camelCase.

::before and ::after

When the element draws a ::before or ::after, its styles come along: a rule of its own in CSS, the before: and after: variants in Tailwind (with content-['★']). A style object cannot reach a pseudo-element, so JSX adds the CSS it needs as a comment.

With children

Press With children on the code card to copy the element and everything inside it, as markup: HTML with a class per element and a <style> block (CSS), HTML with utility classes (Tailwind), or JSX with a style object per element. Links, image sources, alt text and SVG shapes are kept; scripts and hidden elements are left out. Each element holds only what differs from its parent and the browser's defaults. Up to 300 elements are copied.