Tailwind CSS Scan & Copy

About

Hover. Inspect. Copy. Export pristine Tailwind CSS utility components instantly!

Tailwind CSS Scan & Copy is the ultimate developer productivity extension. Designed specifically for web developers, designers, and builders, it allows you to hover over any element on any live website, inspect computed styles in real-time, freeze the scanner, walk up the DOM parent tree, and copy the markup directly into your clipboard as clean, responsive code.

🚀 Key Features:
- Multi-Framework Output: Export clean, modular code formatted instantly for React (JSX), Vue 3 Single File Components (using <script setup>), or raw HTML.
- Perfect Asset Path Resolution: Automatically detects relative image, source-set, and link paths and compiles them into absolute URLs. Say goodbye to broken graphics when copying to external sandboxes!
- Automatic Dark-Mode Backgrounds: Transparent components designed for dark mode automatically inherit their nearest non-transparent parent's background color (e.g. bg-[#0f172a]) upon copying. They render legibly in sandboxes like Tailwind Play instantly, without manual wrappers or instructions.
- Viewport-Smart Centering: Selecting tall elements automatically repositions the floating menu inside your current screen view so the copy controls are never clipped offscreen.
- Zero-Latency UI: Utilizes an ultra-lightweight, 100% client-side computed stylesheet compiler. It compiles in 0 milliseconds and operates entirely locally in your browser to guarantee maximum performance and 100% privacy (no remote APIs or data tracking).
- Dynamic Keyboard Shortcuts: Toggle the hovering scanner instantly with Ctrl+Shift+X (Cmd+Shift+X on macOS), lock focus with a click, and dismiss overlays with the Escape key.

How to get started:
1. Load any webpage and click the extension icon or press Ctrl+Shift+X to activate and again to de-activate.
2. Move your cursor to hover over any element.
3. Click to freeze the inspector, select your desired framework (React, Vue, or HTML), and click "Copy Tailwind Component".
4. Paste it directly into your project or play.tailwindcss.com and watch it render perfectly!