Tail Lens
Tailwind editor in browser - Inspect, edit, preview changes in browser without needing to switch tabs to code editor.
Cost / License
- Pay once
- Proprietary
Platforms
- Google Chrome
- Mozilla Firefox
Features
Tags
- Google Chrome Extension
- development
- frontend
- tailwindcss
- Developer Tools
Tail Lens information
Developed by
CMW Labs Licensing
Proprietary and Commercial product.Pricing
One time purchase (perpetual license) that costs $30.Alternatives
1 alternatives listedSupported Languages
- English
What is Tail Lens?
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.
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)
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.