Tail Lens for Tailwind: Inspect, Edit, and Build Tailwind CSS Visually

Tail Lens is a developer-focused Chrome extension that works like devtools for Tailwind CSS. It is a Tailwind CSS inspector and visual class editor that helps you inspect Tailwind classes, debug Tailwind layouts, and speed up your frontend workflow.

Inspect any element, see all its Tailwind utility classes at a glance, try class alternatives with live preview, and copy the final Tailwind class list in one click.

No more digging through browser devtools, guessing which Tailwind CSS utility is affecting your layout, or constantly switching between editor and browser. Tail Lens turns Chrome into powerful Tailwind devtools so you can build, refactor, and debug Tailwind CSS faster.

Works great with React, Next.js, Vue, Svelte, Laravel and any project using Tailwind CSS.

🔑 Key features:

🔁 Smart Tailwind class alternatives
- Instantly view and switch between Tailwind utility class alternatives.
Get intelligent Tailwind suggestions based on your current classes, layout, and Tailwind config.

🔍 Search and preview any Tailwind CSS class
- Search any Tailwind CSS class, including classes from your custom tailwind.config.
- Hold Alt to preview a Tailwind class on hover directly in the page.
Apply the class with a single click and see Tailwind changes instantly, without reloading.

⚡Live Tailwind class preview on hover
- Hover over alternatives like flex, flex-col, items-center, gap-4, px-6, etc.
Watch your Tailwind layout update live — no manual editing, no trial-and-error in the editor.

🧩 Inspect, pin and compare elements
- Hover any element to open a clean Tailwind inspector panel showing all applied utility classes.
- Press Space to pin the popup and inspect multiple elements side-by-side like real devtools.

🧪Toggle and test Tailwind classes instantly
- Enable or disable any Tailwind class visually to test layout, spacing or visibility.
- Perfect for debugging Tailwind CSS issues with alignment, gaps, responsive behavior and hover states.

📏Layout and spacing guides
- See visual overlays for margin, padding, height, width and position.
- Quickly understand how Tailwind spacing, sizing and positioning utilities affect the layout.

↩️Undo / redo Tailwind changes
- Step backward and forward through your Tailwind edits with shortcuts.
- Safely experiment with different Tailwind class combinations without losing context.

📋One-click Tailwind class copy
- Copy the full Tailwind utility class string for any element in one click.
- Paste it directly into your code editor, React component, Next.js page or Blade/Vue template.

🛠️Tailwind v3 / v4 + custom config support
- Fully compatible with Tailwind CSS v3 and Tailwind CSS v4.
- Understands your tailwind.config theme, colors, spacing scale, fonts and breakpoints.
- Supports the new Tailwind v4 CSS-first config structure so the Tailwind inspector stays accurate even in modern setups.

👤 Who is Tail Lens for?

• Frontend developers who use Tailwind CSS every day and want better Tailwind devtools.
• Teams building React, Next.js, Vue, Svelte, Laravel or SPA/MPA projects with Tailwind.
• Developers who want a visual Tailwind editor to inspect Tailwind classes, debug Tailwind layouts and refactor utility class chains quickly.

If you have ever asked “Which Tailwind class is doing this?” or spent minutes tweaking long Tailwind class strings by hand, Tail Lens is the Tailwind Chrome extension built for you 🚀