Tail Lens for Tailwind
Tailwind editor in browser - Inspect, preview, edit, copy
32 followers
Tailwind editor in browser - Inspect, preview, edit, copy
32 followers
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.
Turbobuild αlpha
Hey Product Hunt community! 👋
I'm Jay, one of the makers of Tail Lens. Like many of you, I love using Tailwind CSS, especially in my React and Next.js projects. However, the constant tab-switching and trial-and-error to get layouts, spacing, and those tricky internal margins/paddings just right was a major drag on my productivity. I'd tweak a class in my editor, save, wait for the hot reload, see it wasn't quite right, and repeat the cycle. I knew there had to be a more intuitive and faster way!
So, I built Tail Lens – a browser extension designed to supercharge your Tailwind CSS styling workflow.
What makes Tail Lens special?
Tail Lens lets you visually edit Tailwind classes directly on your components or any HTML element, live in your browser, often without needing to open the main devtools panel.
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.
Who is Tail Lens for?
Any developer using Tailwind CSS (with React, Next.js, Vue, Svelte, Alpine.js, or even static HTML) who wants to:
Speed up their styling workflow.
Iterate on UI designs much faster.
Reduce the friction of trial-and-error styling.
Currently available for Chrome and Firefox!
Special for the Product Hunt Community:
Tail Lens is a one-time purchase of $30 for lifetime access, which includes all future updates and features. You can try out everything completely free for 7 days (no credit card required) to see how much time it saves you.
What's Next for Tail Lens?
I'm actively developing and improving Tail Lens based on user feedback! Here are some exciting features on the roadmap:
A "Copy as Tailwind" mode: Inspect elements on any website and convert their existing CSS styles into equivalent Tailwind classes.
More advanced suggestion capabilities.
Support for Plugins.
I'm building Tail Lens in the open and am incredibly excited to share it with you all. I'd genuinely love to hear your thoughts, feedback, and any suggestions you might have.
What are your biggest Tailwind CSS pain points that you wish were easier to solve?
Let me know in the comments below!
Thanks for checking out Tail Lens!
Turbobuild αlpha
👋 Hey Guys,
You can try a live demo of the product directly in our website - https://taillens.io
Great tool! I will use it for sure as i know the pain of switching back and forth between vscode and browser to check the difference between gap-1 and gap-2
Darn useful!
💻 A browser-based Tailwind editor? This could be a game-changer for frontend developers! Real-time inspection and editing would massively speed up styling workflows. #TailwindCSS
This looks useful! Keep going!
Turbobuild αlpha
@manu_goel2 Thanks so much, Manu! 🙌 Thrilled you find Tail Lens useful. If you give it a try, I’d love to hear any feedback or ideas, always looking to make it even better. Appreciate the support!
🔥 Game-changer for devs! But does it sync changes back to the code editor, or is it just for previewing? 🤔
Turbobuild αlpha
@sarah_nguyen8 Thank you so much for the kind words!
Right now, Tail Lens lets you preview and copy Tailwind classes directly for quick use in your code.
We're also working on an upcoming version that will let you sync changes directly with your code editor—stay tuned!