2 Tailwind

About

Inspect web elements and convert them to Tailwind CSS instantly. Capture clean HTML with computed styles converted to utilities.

⚡ 2 Tailwind — Inspect and convert any web element to Tailwind CSS instantly

Tired of manually translating CSS styles to Tailwind classes? 2 Tailwind lets you hover, select, and convert any element on any webpage into clean, semantic HTML styled entirely with Tailwind v4 CSS utility classes in one click.

Whether you are copying a design, prototyping, or migrating existing projects to Tailwind, 2 Tailwind does the heavy lifting for you. Everything is stored locally and privately in your browser — no account, no background servers, no subscriptions.

---

🚀 What's New in v1.0.0: Intelligent Conversion & AI Design Analysis
Discover the power of our pixel-perfect Tailwind v4 mapper! Instantly map spacing scales, border radii, typography weights, and sRGB-derived Tailwind palette colors (or generate clean arbitrary brackets `[...]` for off-scale values). Experience local element screenshot previews, markdown/Obsidian exports, offline-safe GitHub Gist sync, and bring-your-own-key AI analysis to suggest tags and extract design tokens across your captures.

---

🎯 Element Inspector & Picker
- Activate the hover inspector to see elements outlined on any webpage as you move your mouse.
- Click to lock on an element, and access the floating ShadowDOM action overlay to Copy Classes or Capture the entire block.
- Perfect isolation: content scripts and picker states are carefully managed to never interfere with other extensions or page events.

🎨 Smart Tailwind v4 Conversion
- Automatically translates computed styles (display, flexbox, grid, sizing, spacing, positioning, typography, colors, and more) into Tailwind CSS classes.
- Matches exact values to Tailwind's named scale (e.g., `padding: 16px` -> `p-4`) or falls back safely to arbitrary utility brackets (e.g., `padding: 13px` -> `p-[13px]`).
- Converts colors to sRGB-derived hex approximations of the Tailwind v4 color palette, or uses arbitrary bracket formatting (`text-[#7b2d43]`) for custom colors.
- Strips default CSS global state properties to keep class lists clean and production-ready.

📸 Visual Screenshot Previews
- Every time you capture a block, the extension automatically takes a high-quality screenshot of the active tab.
- Bounding-box cropping ensures your capture is saved with a pixel-perfect, local-only JPEG preview image.
- Advanced coordinate-mapping handles elements inside iframes/nested frames effortlessly.

🏷️ Organization & Tagging
- Manage all your captures inside Chrome's native Side Panel.
- Organize, search, and assign custom tags to your captures.
- Filter easily by tag using highly performant indexed queries in IndexedDB.

🤖 AI-Powered Assistant (Optional — bring your own API key)
- Analyze single captures to automatically suggest 1–3 semantic tags (like `card`, `hero`, `nav`, `button`).
- Run a collection-wide analysis to infer common design tokens (colors, typography, spacing, border radii) across all captured components.
- Completely private and flexible: supports Google Gemini, Anthropic, and OpenAI using your own local API keys.

🔮 Obsidian Integration (Optional)
- Export saved captures directly into your Obsidian vault using the secure `obsidian://` URI scheme.
- No plugins required. Customize your template, set target notes, and even create dynamic daily notes using `{{date}}` variables.

☁️ GitHub Gist Sync (Optional)
- Synchronize your captures securely across devices by linking a private GitHub Gist with a Personal Access Token.
- Smart merge handles conflict-free deduplication, ensuring local captures are never overwritten.
- Soft-delete support allows deletions to propagate across synced devices seamlessly.

---

🔒 Privacy first
All your data lives inside your browser's IndexedDB. Nothing leaves your computer unless you choose to configure Gist synchronization or use an AI Assistant. No background trackers, no analytics, and no third-party telemetry.

---

⚙️ Permissions used
- `storage` — Persists settings, Gist details, API keys, and captured block metadata locally.
- `sidePanel` — Launches the companion side panel for browsing, managing, and search.
- `activeTab` — Resolves the page URL, title, and selected elements for active tab interaction.
- `webNavigation` — Resolves iframe hierarchies to accurately calculate coordinates for screenshot cropping.