Tail Lens - Tailwind editor in Browser (Inspect,Search,Edit,Preview Tailwind classes)

Tail Lens – The Smartest Way to Inspect and Edit Tailwind CSS

Inspect. Edit. Build. Tailwind, right inside your browser — visually.

If you work with Tailwind CSS, this tool will save you time, reduce frustration, and streamline your workflow — whether you're debugging layouts, experimenting with spacing, or trying out different utility classes.

No more guessing. No more switching tabs. Just fast, visual Tailwind editing where you need it most.

🔑 Key Features

🔍 Visual Class Inspector
See all Tailwind classes applied to any element instantly, in a clean and readable popup.

⚡ Real-Time Class Editing with Autocomplete
Edit Tailwind classes directly in the browser with smart autocomplete and suggestions — no code editor required.

🧭 Live Preview of Class Alternatives
Click on classes to explore related options and preview layout changes instantly on hover.

🔍 Efficient Element Navigation

Effortlessly traverse deeply nested elements using intuitive keyboard shortcuts (up and down arrows).

📏 Spacing & Layout Guides
Get real-time overlays for padding, margin, width, height, and positioning to debug layouts with precision.

📌 Pin Multiple Elements
Lock and inspect multiple components side-by-side using the Spacebar or a click.

🎹 Shortcut-Driven Workflow
Work faster with intuitive keyboard shortcuts for every core action.

🛠️ Supports Tailwind v3 and v4 + Custom Configs
Tailwind Lens understands your tailwind.config.js, including custom themes, screens, and variants.

🔤 Font & Style Info at a Glance
Easily view font size, weight, color, and other key text styles on hover.

📋 One-Click Class Copy
Copy all applied Tailwind classes from any element in one click.

↩️ Undo / Redo Support
Navigate through changes quickly with full undo/redo support — just like your code editor.

👁️ Toggle Classes Instantly
Temporarily enable or disable any class to test layout variations on the fly.

💰 One-Time Pricing

$30 – Lifetime License

• ✅ Use on unlimited devices
• ✅ Get all future updates free
• ✅ 24-hour email support
• ✅ 14-day money-back guarantee — no questions asked

🔍 Optimized for Tailwind Developers

Tailwind Lens is built for:

• Developers using Tailwind CSS on a daily basis
• UI engineers and designers working on component-based designs
• Teams who want faster debugging and styling inside the browser

Whether you’re building with Tailwind in Next.js, React, Vue, Laravel, or plain HTML — Tailwind Lens fits right into your stack.

Next Release

📅 May 24, 2025 (in 9 days)

Launched on May 21, 3 days ahead of schedule

🔖 Version: v2.0

• Overridden Class DetectionShow overridden Tailwind classes with a strikethrough.
• Keyboard NavigationNavigate to parent and sibling elements using arrow keys.

📅 May 29, 2025 (in 5 days)

Launched 10 days ahead of schedule

🔖 Version: v2.1

• Tailwind v4 Compatibility Full support for Tailwind CSS v4 and its new utilities.
  

📅 June 7, 2025 (in 23 days)

🔖 Version: v2.2

Element-to-Tailwind Converter

Convert any HTML element to fully functional Tailwind CSS code.

Tailwind v3 Plugin Support

Support for official Tailwind CSS v3 plugins.