Tail Lens for Tailwind: Edit Visually

Inspect. Edit. Build. Tailwind, right in your browser.

Tail Lens – Inspect, Edit, and Build Tailwind CSS Visually

How to view, search, edit tail wind classes?

Tail Lens is a developer-focused Chrome extension that helps you inspect, edit, and debug Tailwind CSS classes visually, right in your browser.

No more devtools digging, guessing which utility class is affecting your layout, or constantly switching between tabs. Tailwind Lens brings clarity and speed to your frontend workflow with live Tailwind class previews, smart editing, and visual overlays.

Key Features 🎯 Smart Class Alternatives Instantly view and switch between Tailwind class alternatives. Get intelligent suggestions based on your current classes.

⚡ Search & Preview Any Class Search any Tailwind class (including custom config), preview with Alt key, and apply with a single click. See changes instantly.

⚡ Live Class Preview on Hover Hover over class alternatives (e.g., flex-col) to preview layout changes instantly — no reloads.

📌 Pin & Compare Elements Lock popups with Space and inspect multiple components side-by-side.

👁️ Toggle Classes Instantly Enable/disable any class visually to test layout and behavior.

📏 Layout & Spacing Guides See real-time overlays for margin, padding, height, and position. Undo/Redo Support Quickly step through your changes without losing context.

↩️ Undo / Redo Support Easily go back and forth through your changes with shortcuts.

📋 One-Click Class Copy Copy all applied classes from any element with a single click.

🛠️ Tailwind v3/v4 + Custom Config Support Understands your tailwind.config.js, including themes and breakpoints. Supports both Tailwind CSS v3 and v4 (including v4's new CSS config structure).