Tail Lens for Tailwind - Tailwind editor in browser - Inspect, preview, edit, copy

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.

1. Supports both v3 and v4 Tailwind CSS.

2. Instant Previews: See changes immediately as you type or select classes. No more context switching!

3. 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.

4. Smart Suggestions: Get helpful suggestions for related classes (e.g., gap-3, gap-4, gap-5 if you're working with gap-6).

5. Override Detection: Clearly see which Tailwind classes are being overridden by others on the same element.

6. Keyboard Navigation: Quickly move between DOM elements to inspect and edit them.

7. 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:

1. Speed up their styling workflow.

2. Iterate on UI designs much faster.

3. 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:

1. A "Copy as Tailwind" mode: Inspect elements on any website and convert their existing CSS styles into equivalent Tailwind classes.

2. More advanced suggestion capabilities.

3. 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!

👋 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!

This looks useful! Keep going!

💻 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

🔥 Game-changer for devs! But does it sync changes back to the code editor, or is it just for previewing? 🤔

No more alt-tabbing madness! Just styled my landing page in 5 mins flat. 😍 When's the React integration coming?