Build Faster with Tailwind Lens
Inspect, Edit, Build, and Preview Tailwind CSS directly in the browser â no context switching, no guessing.
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.
⥠Live Class Preview on Hover
Hover over class alternatives to preview layout changes instantly without reloading.
đ Pin & Compare Elements
Lock popups and inspect multiple components side-by-side for efficient comparison.
đī¸ Toggle Classes Instantly
Enable or disable any class visually to test layout and behavior in real time.
đ Layout & Spacing Guides
See real-time overlays for margin, padding, height, and position for pixel-perfect design.
âŠī¸ Undo / Redo Support
Easily go back and forth through your changes with intuitive shortcuts.
đ Efficient Element Navigation
Effortlessly traverse deeply nested elements using intuitive keyboard shortcuts.
đ One-Click Class Copy
Copy all applied classes from any element with a single click for easy reuse.
đ ī¸ Tailwind v3/v4 + Custom Config
Understands your tailwind.config.js, including themes and breakpoints. Supports both Tailwind CSS v3 and v4.
đž One-Click Export
Export your final Tailwind classes or code with a single click.
𧊠Custom Theme Support
Works seamlessly with your custom Tailwind themes and configurations.