Stop hand-translating CSS into Tailwind. TailSnap is a Chrome extension that reads any element's computed styles and gives you a clean, copy-ready Tailwind class string — instantly.
Lifetime license · No subscription · Works on any site
TailSnap activates a picker overlay on any site you're looking at.
Highlighted in real time. One click grabs it.
Clean, ordered Tailwind output. Paste into your component. Done.
inline-flex items-center px-4 py-2 bg-sky-500 text-white font-medium rounded-lg shadow-sm hover:bg-sky-400 cursor-pointer
One-time. No subscription. All future updates included.
Buy TailSnapw-[347px]) for unusual valuesTailSnap works on any website you can open in Chrome, except for Chrome's own settings pages (that's a browser restriction, not ours). It reads the element's computed styles directly — the site doesn't need to be using Tailwind itself.
We use Tailwind's arbitrary-value syntax — things like w-[347px] or bg-[#c7f24a]. For very unusual styles (custom gradients, multi-layer shadows), we output the raw CSS as a comment so you can decide how to handle it.
No. Everything happens locally in your browser. TailSnap has zero servers and zero analytics on your usage. The extension has access only to the tab where you activate it.
Yes. Pay once, use forever, including all future updates. No subscription nonsense.
Up to 10 devices per license key. That's your laptop + desktop + work machine + home + spare — more than enough for a real developer. If you hit the limit and need more (say you got a new computer and lost access to the old one), email tailsnapsupport@duck.com and we'll sort it out.