TailSnap — Tailwind Class Inspector

Click any element on any website and get its exact Tailwind CSS class equivalent. One-click copy.

TailSnap turns any element on any website into clean, copy-ready Tailwind CSS classes. One click to pick an element — one click to copy its full Tailwind class string. If you've ever inspected a site you liked, copied its CSS, and then sat there hand-translating `padding: 12px 16px` into `px-4 py-3`, TailSnap saves you that time. Dozens of times a day. ━━━━━━━━━━━━━━━━━━━━━━ HOW IT WORKS ━━━━━━━━━━━━━━━━━━━━━━ 1. Click the TailSnap icon in your toolbar 2. Hover elements — they're highlighted in real time 3. Click to pick one — its Tailwind class string appears at the bottom-right 4. Click "Copy" — paste into your component ━━━━━━━━━━━━━━━━━━━━━━ WHAT IT COVERS ━━━━━━━━━━━━━━━━━━━━━━ ✓ Colors — full Tailwind default palette (bg, text, border) + arbitrary hex fallback ✓ Spacing — padding, margin, gap (default scale + arbitrary values) ✓ Sizing — width, height, min/max-width/height (default scale + arbitrary) ✓ Typography — font size, weight, family, line-height, letter-spacing, alignment, transform, decoration ✓ Borders — per-side width, per-corner radius, color ✓ Shadows — common Tailwind patterns (graceful fallback for unusual ones) ✓ Layout — display, position, top/right/bottom/left, z-index, overflow, truncate ✓ Flex — direction, justify, align, wrap, gap, flex-1/auto/none, align-self, order ✓ Grid — template-columns, gap ✓ Opacity, cursor, user-select, pointer-events For anything outside Tailwind's default scales, TailSnap uses arbitrary-value syntax like `w-[347px]` or `bg-[#c7f24a]` — so the output always compiles, always renders, always matches. ━━━━━━━━━━━━━━━━━━━━━━ PRIVACY ━━━━━━━━━━━━━━━━━━━━━━ ✓ Class extraction is 100% local — the styles you pick never leave your browser ✓ One network call total: license activation (your key + a random device ID) when you enter a Pro key ✓ Zero analytics, zero tracking, zero telemetry ✓ Only activates on the tab where you click the icon (activeTab permission) ✓ No account, no sign-in ━━━━━━━━━━━━━━━━━━━━━━ PRICING ━━━━━━━━━━━━━━━━━━━━━━ $29 one-time. Lifetime license. All future updates included. No subscription. Each license key activates on up to 10 devices. Visit https://tailsnap.app to buy. ━━━━━━━━━━━━━━━━━━━━━━ WHO IT'S FOR ━━━━━━━━━━━━━━━━━━━━━━ Frontend developers and designers who work in Tailwind daily. TailSnap doesn't care what framework you use — it reads the rendered styles on the page, so it works the same whether the site was built with a modern JavaScript framework, a static site generator, or plain HTML. ━━━━━━━━━━━━━━━━━━━━━━ NOT SUPPORTED (YET) ━━━━━━━━━━━━━━━━━━━━━━ This release covers the essentials. Not yet in scope: - Responsive variants (md:, lg:) — outputs the base class only - Dark mode detection (dark:) - Pseudo-states (hover:, focus:, active:) — shows current computed state only - Transforms (rotate, scale, skew, translate) - Filters / backdrop-filter - Animations & transitions ━━━━━━━━━━━━━━━━━━━━━━ SUPPORT ━━━━━━━━━━━━━━━━━━━━━━ Email: tailsnapsupport@duck.com (support questions, bug reports, feature requests) Site: https://tailsnap.app