Tailwind Lens - Inspect and Edit Tailwind CSS Visually icon

Tailwind Lens - Inspect and Edit Tailwind CSS Visually

Extension Actions

How to install Open in Chrome Web Store
CRX ID
demaopjbklmbhciafgaaklilnffpihed
Description from extension meta

Inspect & Edit Tailwind right in your browser.

Image from store
Tailwind Lens - Inspect and Edit Tailwind CSS Visually
Description from store

Tailwind Lens is a professional Chrome extension designed specifically for developers working with Tailwind CSS. It transforms how you inspect, debug, and modify Tailwind classes by providing a visual interface that shows you exactly what each utility class does in real-time.

✨ Key Features:
🔍 Visual Class Inspector

See which Tailwind classes are applied to any element

Visual color previews for all color utilities

Real-time display of spacing, typography, and sizing values

Highlight hover, focus, and responsive variants

🎨 Live Class Editor

Edit Tailwind classes directly in the browser

See changes instantly without refreshing

Intelligent autocomplete for Tailwind v2/v3 classes

Built-in class validator to prevent errors

💡 Smart Suggestions

Get intelligent class suggestions based on element type

Discover alternative class combinations

Learn Tailwind patterns with contextual help

Access to all Tailwind variants and plugins