Extract & export
Export to Tailwind
Export any website section as HTML + Tailwind or React + Tailwind. Media queries become min-[]/max-[] variants, states become hover:, !important becomes !.
Updated October 20, 2026
The Tailwind export turns a section of any site into markup with Tailwind classes, so it drops straight into a Tailwind project without a separate stylesheet. You can get it as HTML + Tailwind or React + Tailwind.
How to export a section to Tailwind
-
Open the inspector with Alt+I and click the section or component you want.
-
Choose HTML + Tailwind or React + Tailwind in the export window.
-
Check the isolated preview at 375, 768, 1024 and 1280 px to make sure the breakpoints came across.
-
Copy the code or download the files.
How the CSS becomes Tailwind classes
Pickode starts from the CSS the author wrote, not from computed values, and translates each rule into Tailwind with arbitrary values. The values in your classes are the site’s real values, not the nearest step of the default scale.
| In the author’s CSS | In the Tailwind export |
|---|---|
| Any value (sizes, colors, spacing…) | Arbitrary values, taken from the author’s CSS |
| Media queries | min-[]: and max-[]: variants |
States such as :hover |
State variants such as hover: |
!important |
The ! modifier |
Because media queries become variants on the classes themselves, the responsive behaviour stays in the markup: you don’t need to rebuild breakpoints by hand. Variables (var()) are resolved to the site’s value, and relative URLs are made absolute, as in the other formats.
HTML + Tailwind or React + Tailwind?
| Format | Use it for |
|---|---|
| HTML + Tailwind | Static pages, templates, any framework where you paste markup |
| React + Tailwind | A JSX component for a React project that already uses Tailwind |
If you’d rather keep the site’s design system too, export the design tokens as a Tailwind v4 @theme or a tailwind.config.js.
Free and Pro
Limits
Related
Still stuck?Contact us