Visually edit Tailwind css, no more guessing classes and switching tabs between editor,browser - 500+ users!

[jayasurya-jeyakodi]

This tool lets you live-edit Tailwind CSS classes directly in the browser. Inspect, navigate the DOM, get real-time class suggestions, tweak, preview, copy - all without switching to your code editor. Supports both v3 and v4 versions of Tailwind CSS.

Please watch quick video demo below

Features

• Supports both v3 and v4 Tailwind CSS.
• Instant Previews: See changes immediately as you type or select classes. No more context switching!
• On-the-Fly JIT Class Generation: This is a game-changer! If you try a class like mt-[23px] or bg-[#1a2b3c] that isn't in your initial build, Tail Lens generates and injects it instantly so you can see it working – no more "class not found" surprises during live editing.
• Smart Suggestions: Get helpful suggestions for related classes (e.g., gap-3, gap-4, gap-5 if you're working with gap-6).
• Override Detection: Clearly see which Tailwind classes are being overridden by others on the same element.
• Keyboard Navigation: Quickly move between DOM elements to inspect and edit them.
• Copy Final Classes: Perfected your styles? Copy the final, cleaned-up class list with one click back to your code

Where to try it out?

Try it live here https://taillens.io

Happy to give 20% off coupon to folks interested. Please leave a comment here.

m2-res_1080p.1.mp4