Tail Lens for Tailwind CSS

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

Live-edit Tailwind CSS classes directly in the browser. Inspect, navigate the DOM, get real-time class suggestions, tweak, preview, and copy - all without switching to your code editor. Tail Lens is compatible with both the v3 and v4 versions of Tailwind CSS.

Feature Highlights
Tail Lens provides all the necessary features to enhance 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).