Copy any element as clean Tailwind.

Click something on any website. Get it back as Tailwind, HTML + CSS, or JSX, ready to paste into your project.

Add to Chrome - it's free See how it works

Free. No account, nothing leaves your browser.

any website

Pro plan

Everything in Free, plus unlimited projects and priority support.

$19 / month

Get started

Snipwind

TailwindHTML + CSSJSX

<div class="max-w-[340px] p-[22px] border border-[#e5e7eb] rounded-xl bg-white shadow-[0px_1px_3px_0px_rgba(0,0,0,0.1)] text-[#1f2937] font-[Arial,sans-serif]">
  <h3 class="mb-2 text-[#111827] text-xl font-bold leading-7">Pro plan</h3>
  <p class="mb-4 text-[#6b7280] text-sm leading-[1.6]">Everything in Free, plus unlimited projects and <strong class="font-bold">priority</strong> support.</p>
  <div class="flex justify-between items-center gap-3">
    <div class="text-[#4f46e5] text-[24px] font-bold">$19 <small class="text-[#9ca3af] text-[13px] font-normal">/ month</small></div>
    <span class="px-[18px] py-2.5 rounded-lg bg-[#4f46e5] text-white text-[14px] font-semibold">Get started</span>
  </div>
</div>

Output you would write yourself

Most copy tools dump every computed style. Snipwind keeps only what the element needs.

Three formats

Tailwind classes, plain HTML with a small stylesheet, or a JSX component. Switch tabs, copy the one you need.

Stays flexible

Widths that were auto, percentages and calc() stay that way, so the copy still adapts to its container.

No defaults, no noise

Styles the browser or Tailwind already applies are left out. Padding, borders and corners collapse into shorthands.

Icons and details

Inline SVG icons come along with their colours, and so do ::before and ::after decorations.

Tailwind v3 and v4

Only uses class names that mean the same thing in both versions, with exact values where they differ.

Private by design

Everything runs inside the page you are on. No account, no tracking, no page content sent anywhere.

How it works

Three steps, no setup.

Start picking

Click the Snipwind icon in the toolbar, or press Alt + Shift + C.

Click an element

Hover to highlight, click to select. ↑ moves to the parent, ↓ to the first child.

Copy and paste

Choose Tailwind, HTML + CSS or JSX, press Copy, and paste it into your editor.

FAQ

Is it free?

Yes. Snipwind is free to use.

Does it copy fonts?

It copies the font names and sizes, not the font files. If your project does not load the same web font, text falls back to the next font in the list.

Does it copy hover effects and mobile layouts?

Not yet. Snipwind copies the element as it looks at the moment you click it.

Is my browsing data collected?

No. The extension only runs when you click its icon, works entirely inside that page, and has no analytics. See the privacy policy.

Can I use what I copy?

Snipwind copies structure and styling. Text, images, logos and overall designs still belong to their owners, so use it to learn from and adapt layouts, not to clone someone's site.