TailSnap — Tailwind Class Inspector

About

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, overflow
✓ Flex — direction, justify, align, wrap, gap
✓ Grid — template-columns, gap
✓ Opacity, cursor

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
━━━━━━━━━━━━━━━━━━━━━━

✓ 100% local — nothing leaves your browser
✓ Zero servers — we don't run any
✓ Zero analytics on your usage
✓ Only activates on the tab where you click the icon (activeTab permission)
✓ No account, no sign-in, no tracking

━━━━━━━━━━━━━━━━━━━━━━
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)
━━━━━━━━━━━━━━━━━━━━━━

v0.1 is the initial release. Not in scope for this version:
- 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

Coming in v0.2. Buy once, get the update free.

━━━━━━━━━━━━━━━━━━━━━━
SUPPORT
━━━━━━━━━━━━━━━━━━━━━━

Email: [email protected] (support questions, bug reports, feature requests)
Site: https://tailsnap.app