Logo
    Tailwind Lens    FeaturesWhyPricingFAQRoadmapBlog

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

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

    Why Tailwind 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

    Tailwind 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.

    GIF

    ⚡ Search & Preview Any Class

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

    GIF

    ⚡ Live Class Preview on Hover

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

    GIF

    📌 Pin & Compare Elements

    Lock popups with Space and inspect multiple components side-by-side.

    GIF

    👁ī¸ 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.

    📋 One-Click Class Copy

    Copy all applied classes from any element with a single click.

    GIF

    🛠ī¸ Tailwind v3 + Custom Config Support

    Understands your tailwind.config.js including themes and breakpoints. (v4 support coming soon)

    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

    📌 Tailwind Lens Roadmap

    📅 May 24, 2025

    🔖 Version: v2.0

    • Overridden Class Detection

      Show overridden Tailwind classes with a strikethrough.

    • Keyboard Navigation

      Navigate to parent and sibling elements using arrow keys.

    • Tailwind v3 Plugin Support

      Support for official Tailwind CSS v3 plugins.

    📅 June 7, 2025

    🔖 Version: v2.1

    Element-to-Tailwind Converter

    Convert any HTML element to fully functional Tailwind CSS code.

    📅 June 20, 2025

    🔖 Version: v2.2

    Tailwind v4 Compatibility

    Full support for Tailwind CSS v4 and its new utilities.

    Frequently Asked Questions

    Everything you need to know before buying Tailwind Lens

    Tailwind, the way it was meant to be edited.

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