Free Developer Chrome Extension

Inspect any element.
Copy pure Tailwind HTML.

2 Tailwind is a local-first browser extension that lets you hover over any design on the web, map its computed styles to accurate Tailwind v4 utility classes, and capture clean HTML trees instantly.

Add to Chrome — it's free
Zero telemetry — Local first Tailwind v4 palettes & families Copy clean HTML subtrees offline

Copy styles in 3 simple steps.

  1. Activate & Hover

    Open the side panel to start the element inspector. Hover over any element to see its outline.

  2. Lock and Convert

    Click to lock the element. Our smart compiler instantly parses its computed styles into Tailwind v4 utility classes.

  3. Copy Clean HTML

    Copy the Tailwind class list, or copy the entire HTML block with classes baked directly into the tags.

Engineered for Front-end Productivity

No more inspect-element hunting. Get precise Tailwind utility classes from arbitrary web elements instantly.

CSS-to-Tailwind Mapper

Converts over 50 computed CSS properties: display, padding, margin, width, border style, shadow, flex, grid templates, typography, and more, matching them to Tailwind utility classes.

Tailwind v4 Palette

Includes 341 color entries with OKLCH-derived sRGB approximations, mapping colors to named classes (like `text-blue-500`). Handles new v4 color families: `mauve`, `olive`, `mist`, `taupe`.

Interactive Element Picker

An intuitive hover selector with element outlines. Clicking locks the selection and renders a ShadowDOM action overlay to Copy Classes or Capture HTML without polluting the page DOM.

Clean HTML Output

Strips inline styles, IDs, and redundant class pollution. Bakes parsed Tailwind v4 utility classes straight into the HTML tags, delivering modular, ready-to-use markup.

Persistent Side Panel

Integrated into Chrome's native Side Panel API. A clean, resizable workspace that stays with you across tab navigations with smart session synchronization.

Local Library Manager

All captured components are saved in local IndexedDB. Search by page title, URL, or classes, add custom tags, and filter instantly to build your local design system.

GitHub Gist Sync

Optionally sync your captured library across devices using a private GitHub Gist. Rest assured with an offline-first smart merge that never overwrites your local-only blocks.

Unmatched CSS Properties

What can't be mapped is not forgotten. The sidebar displays an "unmatched styles" list (like complex filters or gradients) so you can tweak them manually.

Offline-Ready & local-first

No account creation. No external tracking. Everything is fully operational offline and runs entirely inside your browser sandbox.

Privacy is baked in, not bolted on.

2 Tailwind operates with zero server infrastructure. There are no registration forms, analytics tracking, or remote tracking systems. Your data stays where it belongs: on your device.

  • Saved elements are stored locally in your browser's IndexedDB database
  • GitHub tokens and Gist settings are stored locally via Chrome Extension APIs
  • Absolute zero analytics, tracker scripts, cookies, or fingerprinting
  • Easily export and carry your captured database as a standard JSON file
  • Minimal runtime scope permissions: reads only what you explicitly inspect

Frequently asked questions

How does 2 Tailwind convert styles to utility classes?
When you click on an element, the content script extracts its computed styles via `window.getComputedStyle`. It then routes those styles through our custom compiler which parses exact pixel and color values, maps them to standard Tailwind v4 scale entries (e.g. `padding: 16px` -> `p-4`), and outputs arbitrary Tailwind classes (e.g. `p-[13px]`) on off-scale values.
Does it support Tailwind CSS v4?
Yes! 2 Tailwind is built specifically for Tailwind v4 configurations. It matches classes to the new v4 borders scale (e.g., `rounded-xs` for 2px, `rounded-sm` for 4px) and includes mapping support for the new OKLCH color palettes, such as `mauve`, `olive`, `mist`, and `taupe`.
Is my inspected code sent to a remote server?
Never. The entire parsing, compilation, and storage loop takes place directly in your browser on your local thread. No code or asset information is ever sent to Sveltify LLC or any third-party telemetry server.
How does GitHub Gist synchronization work?
It is an completely optional sync option. If you configure a personal GitHub token and Gist ID in the options page, 2 Tailwind will serialize your captured library and sync it to a private Gist under your own account. A safe duplicate-checking merge algorithm brings all your browser installations up to date without deleting local-only data.
Is 2 Tailwind open source or free?
It is completely free to use. There are no subscriptions, ads, or premium tier paywalls. Sveltify LLC is proud to provide clean, productive tools for front-end developers.

A powerful Tailwind v4 code-capture tool that runs completely on your device.

Free. No account. Offline-first from day one.

🎯 Add 2 Tailwind to Chrome