Tailwind Css Inspector Vi

🎨 **Tailwind CSS Inspector** is a visual CSS inspection tool that lets you analyze any website's design and export it as Tailwind CSS classes or React components. Built for frontend developers who work with Tailwind CSS.

### ✨ FREE Features

**Smart Inspector**
Hover over any element to see its complete styles:
- Typography: font family, size, weight, line-height
- Colors: text and background with HEX codes
- Spacing: padding and margins visualized
- Dimensions: width and height
- Layout: flexbox and grid properties

**Color Picker**
- Pick colors from any website with pixel precision
- 11x11 magnifier grid for accurate selection
- Click to copy HEX codes instantly

**Keyboard Shortcuts**
- Press **B** to lock the inspector panel
- Press **T** to toggle transparent mode
- Press **ESC** to stop inspecting

---

### 🚀 PRO Features ($5 Lifetime)

**Tailwind CSS Export**
Convert any element's styles to Tailwind classes with one click:
- Automatic pixel-to-Tailwind conversion (16px → `p-4`)
- Intelligent color matching with Tailwind's palette
- Complete utility class coverage
- Supports spacing, typography, colors, layout, borders, shadows

**React Component Export**
Generate production-ready JSX snippets:
- Clean JSX syntax with Tailwind classes
- Proper `className` attributes
- Preserves HTML structure
- Ready for Next.js, React, or any JSX project

**Style Guide Generator**
Extract design systems from any webpage:
- All colors used on the page with HEX codes
- All fonts with weights and sizes
- Export as JSON or Tailwind config
- Perfect for design documentation

**Asset Grabber**
Download images and graphics:
- All images (JPG, PNG, WebP, SVG)
- CSS background images
- Bulk download with one click
- Preview thumbnails with dimensions

---

### 🎯 Who Is This For?

**Frontend Developers**
- Build with Tailwind CSS faster
- Convert designs to code quickly
- Learn Tailwind patterns from real websites

**UI/UX Designers**
- Extract color palettes and typography
- Analyze competitor designs
- Document design systems

**Teams**
- Speed up design-to-code handoffs
- Standardize component libraries
- Maintain design consistency

---

### 🔒 Privacy

Tailwind CSS Inspector works entirely locally in your browser. No data is sent to external servers. The only network request is for payment verification (ExtensionPay).

---

### ⚡ How It Works

1. Click the extension icon
2. Click "Start Inspecting"
3. Hover over any element on any website
4. See instant style information
5. (Pro) Click "Copy Tailwind" or "Export React"

---

### ❓ FAQ

**Does this work on all websites?**
Yes, on any HTTP/HTTPS website. Does not work on Chrome internal pages.

**Is the Pro license a subscription?**
No. $5 one-time payment for lifetime access. No recurring fees.

**Can I get a refund?**
Yes, refunds are available through ExtensionPay within a reasonable period.

**How is this different from DevTools?**
Faster workflow, automatic Tailwind conversion, React export, and cleaner interface designed for modern development.

---

### 📦 What's Included

**FREE:**
- Visual CSS inspector
- Color picker with magnifier
- Pin and transparent modes
- Keyboard shortcuts
- Works on all websites

**PRO ($5 one-time):**
- Tailwind CSS export
- React/JSX component export
- Style Guide generator
- Asset Grabber
- Lifetime updates