Product Thumbnail

Tailscan Devtools

The ultimate developer tool for Tailwind CSS

Browser Extensions
Design Tools
Developer Tools

Build, design and debug any Tailwind-based website with Tailscan, right within the browser. Tailscan Devtools is an expansion of Tailscan that tightly integrates with browser devtools. Speed up your workflow and prototype quicker than ever before!

Top comment

Hello Product Hunt 👋! It has been six months since Tailscan 2 has launched and something new has been in the making ever since ✨. Today I'm proud to show you Tailscan Devtools! Tailscan Devtools is a deep integration within the browser devtools that makes debugging and building your (or any) website with Tailwind CSS much easier than ever before. In the last 1.5 years, more than one thousand users have downloaded Tailscan and improved their workflow and are now debugging and prototyping faster than ever! Why use Tailscan Devtools, you ask? Browser devtools are great, but they aren't exactly made for a utility library like Tailwind CSS. Without Tailscan Devtools: ❌ Classes are purged: If you use Chrome Devtools to debug and build your website, you run into trouble when adding Tailwind classes because all the unused classes are purged from the CSS! ❌ No real-time feedback: You can't see your changes right away and prototyping or trying out different classes means you have to switch back and forth between your browser and code editor. ❌ No autocomplete: Browser devtools don't suggest classes to you, so if you happen to forget a class, you'll have to go to the Tailwind documentation first. Time consuming! Tailscan Devtools answers these questions with a deep integration to browser devtools to make working with Tailwind CSS in the browser an absolute breeze. ✅ Debug and build with Tailwind right within the devtools, classes are automatically compiled in real time. ✅ Quickly copy the class list or element with all the changes. ✅ Discover how any Tailwind-based website is built and what CSS is generated by which class. Besides the new functionalities in the Tailscan Devtools update, Tailscan can: ✅ Be used as a hover & inspect window as well (if you prefer this over browser devtools). ✅ Work with your own Tailwind config, so all custom classes are supported as well. ✅ Convert any element on any website to a Tailwind-based component. To celebrate the launch of Tailscan Devtools, there are a limited number of discounted lifetime licenses available for the next few days. Grab the deal before it runs out! I'd love to hear your questions, feedback and comments. Thank you very much 🙌 Have a great day! Erwin

Comment highlights

🎉Congrats! We're launching "Cascad3 - A decentralized inspiration-driven publishing platform" on Product Hunt soon. Let's collaborate! I would appreciate your support and feedback by clicking the "Notify Me" button to stay tuned and be the first to know when Cascad3 debuts on the stage.👇 producthunt.com/products/cascad3 Thank you! Best regards, Yam

Kudos on the launch! I love it when developer tools have a minimal & distraction free interface.

Congrats on the launch! Devtools is much better than having an external popup IMO, good job!!

Have been using Tailscan since v0 and it's an absolute timesaver for anything related to designing with Tailwind. It's so much easier to tweak and test design changes inside the browser, than trying to fiddle around with code and jump back and forth. The covert element to Tailwind component is also a Killer feature 😎💪

Tailscan is fantastic for developing on Tailwind. Easy to use and debug . Erwin is a great maker and I love his attitude. Keep up with the good work!

This is such an exciting development! @erwin_lengkeek Tailscan Devtools is set to revolutionize Tailwind CSS development, providing a comprehensive solution for building, designing, and debugging websites directly within the browser. With seamless integration with browser devtools, developers can expect a significant boost in productivity and faster prototyping. Ewwin How Tailscan Devtools accommodates different Tailwind CSS configurations and project setups. Are there customizable features to tailor the tool to specific developer needs and workflows? Eager to see how Tailscan Devtools enhances the Tailwind CSS development process!

Super fast and light! Really great set of tools, I'm loving the way this is put together. Excellent launch, all!!