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

taillens.io

Featured

4.1(

28 ratings

)

Extension Developer Tools546 users

Item media 4 (screenshot) for Tail Lens for Tailwind: Inspect, Edit, and Build Tailwind CSS Visually

Item media 5 (screenshot) for Tail Lens for Tailwind: Inspect, Edit, and Build Tailwind CSS Visually

Item media 1 (screenshot) for Tail Lens for Tailwind: Inspect, Edit, and Build Tailwind CSS Visually

Item media 2 (screenshot) for Tail Lens for Tailwind: Inspect, Edit, and Build Tailwind CSS Visually

Item media 3 (screenshot) for Tail Lens for Tailwind: Inspect, Edit, and Build Tailwind CSS Visually

Overview

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

Tail Lens – Inspect, Edit, and Build Tailwind CSS Visually Support Tailwind versions v3 and v4 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. Tail 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).

4.1 out of 5
28 ratings
Google doesn't verify reviews. Learn more about results and reviews.

Details

Version
2.1.8
Updated
June 20, 2025
Features
Offers in-app purchases
Flag concern
Size
596KiB
Languages
English (United States)
Developer
Cybermind Works
Guindy Chennai, Tamil Nadu 600042 IN
Website
Email
contact@cybermindworks.com
Non-trader
This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

Tail Lens for Tailwind: Inspect, Edit, and Build Tailwind CSS Visually has disclosed the following information regarding the collection and usage of your data. More detailed information can be found in the developer's privacy policy.

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

Personally identifiable information

This developer declares that your data is

Not being sold to third parties, outside of the approved use cases
Not being used or transferred for purposes that are unrelated to the item's core functionality
Not being used or transferred to determine creditworthiness or for lending purposes

Support

For help with questions, suggestions, or problems, visit the developer's support site

Hoverify: All-in-one extension for web developers

4.1(160)

Master web development with an all-in-one browser extension that helps you inspect, edit, test, debug, and optimize websites faster.

Toolwind - Devtool for Tailwind css

4.3(6)

Enhance Tailwind CSS workflow: Easily add, modify, remove, and copy classes with built-in Tailwind IntelliSense

TailwindCSS Studio

4.0(3)

Build, design and debug your Tailwind website visually with TailwindCSS Studio, right within the browser.

Tailwind CSS Scanner

5.0(1)

Scan -> Copy -> Export Tailwind

Alpine.js devtools

4.4(37)

DevTools extension for debugging Alpine.js applications.

Raycast Companion

4.7(28)

A browser extension to give more context to Raycast

Button Stealer

4.9(57)

Steals buttons from the websites you visit. Do your usual online stuff and watch the collection of stolen buttons grow.

DivMagic - Copy Style from any website

3.6(73)

Copy elements from any webpage as reusable web components. Get HTML, CSS, React, JSX or Tailwind CSS code.

Gimli Tailwind

4.6(36)

A DevTools extension enabling smart tools for Tailwind CSS.

Devtools for Tailwind CSS

2.5(18)