Taillens

Tail Lens works inside the browser so developers do not have to switch between the editor and the page to try Tailwind classes. Hovering over an element shows its classes with smart alternatives, and hovering over an alternative such as flex-col previews the layout change instantly. A search finds any Tailwind class, including those from a custom config, previews it with the Alt key and applies it in one click.

It reads tailwind.config.js including themes and breakpoints and supports Tailwind CSS v3 and v4, including the new CSS config structure. Other tools include pinning popups to compare components, toggling classes on and off, overlays showing margin, padding, height and position, plus undo and redo, keyboard navigation through nested elements and one-click copy of all applied classes. A live demo is available, and the lifetime license is a one-time $29 (shown as down from $59) with free updates and a 14-day refund.