Logo
    Tail Lens    FeaturesPricingRoadmapBlogAffiliates
    Now supports Tailwind CSS v4

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

    Tail Lens is the fastest way to work with Tailwind CSS — visually inspect, edit, preview classes without switching tools.

    Tail Lens for Tailwind - Tailwind editor in browser - Inspect, preview, edit, copy | Product Hunt

    Why Tail Lens?

    We built the tool we wished we had while working with Tailwind in browser devtools

    Working with Tailwind inside browser devtools can get painful:

    • It's hard to read long class lists
    • Switching between docs and editor kills your flow
    • Previewing changes is time-consuming and fragile
    • Debugging which class is applied or overridden is messy

    Tail Lens fixes all of that:

    • Visually edit classes right in the browser
    • Hover to preview layout changes instantly
    • Inspect spacing, font, and layout info on hover
    • Toggle, copy, undo — with keyboard shortcuts
    • Built for Tailwind v3 + custom configs

    Feature Highlights

    Everything you need to supercharge your Tailwind workflow

    🎯 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

    Easily go back and forth through your changes with shortcuts.

    🔍 Efficient Element Navigation

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

    📋 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).

    Simple, Transparent Pricing

    One price. Lifetime access. No hidden fees.

    Most Popular

    $30

    Lifetime License

    No monthly fees. No hidden costs.

    • Lifetime access
    • Free updates — forever
    • Unlimited device usage
    • Priority email support
    • Custom configuration support

    No questions asked, 14-day refund

    📌 Tail Lens Roadmap

    📅 May 20, 2025

    🔖 Version: v2.0Completed

    • Overridden Class Detection

      Show overridden Tailwind classes with a strikethrough.

    • Keyboard Navigation

      Navigate to parent and sibling elements using arrow keys.

    📅 May 29, 2025

    🔖 Version: v2.1Completed

    Tailwind v4 Compatibility

    Full support for Tailwind CSS v4 and its new utilities — delivered ahead of schedule.

    📅 June 20, 2025

    🔖 Version: v2.2

    Element-to-Tailwind Converter

    Convert any HTML element into fully functional Tailwind CSS code.

    Tailwind v3 Plugin Support

    Support for official Tailwind CSS v3 plugins.

    📢 What’s New in Tail Lens

    See what’s changed, improved, or been added in the latest release.

    View Release Notes

    Frequently Asked Questions

    Everything you need to know before buying Tail Lens

    Tailwind, the way it was meant to be edited.

    Stop guessing. Start building faster — visually, intuitively, and in flow.