27
38 Comments

I have built a tool to make Tailwind CSS developers more productive

Hello everybody,

I recently launched the beta for a browser extension I have been working on for Tailwind CSS development. Would love to hear any feedback or questions on the website/product!

Live demo at: www.tailwindflow.io

Click on the toggle and move your mouse around to inspect different elements!

Best

  1. 4

    Looks nice, I see value. If you can provide a sample site to show how it looks with the extention that will greatly boost buyer confidence in buying.

    Will it work only with websites built with tailwind?

    I will give you a small idea. Imagine a site is built with bootstrap or other css, then with your tool if I move mouse over a particular element, it will show the equalent tailwind css for me. That I can copy and generate my site immediately, that will increase my productivity greatly.

    1. 3

      This is an excellent idea! It could help non-designers to envision how to reproduce existing things ;-)

      1. 2

        Exactly. It will also helps devs to quickly copy a particular style from any website.

    2. 1

      @prakis I really appreciated the feedback! Yup, this currently only supports websites built with Tailwind CSS. Funny how I previously had the landing page set up so you can try out the actual extension on the landing page but ended up removing it. A few others mentioned they wished they could try it out so I have decided to add the "live demo" back in. You should be able to get over to www.tailwindflow.io to try it out there.

      Let me know what you think about this. You should be able to click on the toggle and start moving your mouse around to inspect elements.

      Oh cool! Thanks for that suggestion. I think as this product moves forward, that is something I can definitely incorporate. Is it that because you have often found yourself wanting to convert websites into Tailwind CSS?

      1. 1

        There is a flaw in your product, how can I contact you? You can also reach me on twitter.

      2. 1

        Now after seeing that demo, I am really interested to buy it (will do it tomorrow). I highly recommened it to anyone who is learning Tailwind.

        Is it that because you have often found yourself wanting to convert websites into Tailwind CSS?

        No I don't convert websites to Tailwind, When I see styles on other websites, I sometimes wonder how that can be achieved with Tailwind.

        1. 1

          Happy to hear you liked the demo @prakis! feel free to reach out to me on Twitter or [email protected]

  2. 2

    Looks really good but need to see more :) Can you provide an animated gif (loom?) of the product in use on your landing page - this will be browser agnostic (some will have safari / mobile / when view the site even if a chrome plugin)

    This could be a quite impressive gif - e.g mock up a lack lustre site and transform it with a few tailwind css changes

    1. 1

      @kierone thanks for this suggestion! yeah, I'm thinking of breaking it up into three GIFS for showcasing copying, editing, and adding Tailwind CSS classes.

  3. 2

    Seems good, but I think the video is too small to see what is happening. I had to zoom in to be able to read it.

    It would be great if the site itself could be inspected by anyone without buying the tool. The site would become a demo of the product it's trying to sell

    1. 2

      Great feedback @brunocalou (: I actually had this setup previously and removed it recently from the landing page. I have decided to add it back in since a few people people asked for this as well so now if you head over to www.tailwindflow.io you can try out the tool on the landing page itself!

      You should be able to click on the toggle and start moving your mouse around to inspect! Let me know what you think about this demo.

      1. 2

        Great! It's much better now

  4. 2

    Very interesting tool! Would really like to test it out.

    A great addition would be + / - buttons for manipulating size-related classes ending with -xl/-lg/…

    I also would recommend slowing down the demo-video on the landing page a bit and increasing the font size of your extension or zooming-in for the demo.

    1. 1

      Hey @dennis_zoma, I added a "live demo" to the site so you should be able to try it out on www.tailwindflow.io Simply click on the toggle and start moving your mouse around to inspect elements!

      That's a great suggestion, this could even apply to integer incremental properties (h-10, h-11, h-13..). I decided to get rid of the video and replaced it with the "live demo" (:

      1. 2

        The demo is gorgeous! I gave you a sell and a ⭐️⭐️⭐️⭐️⭐️ review. Good luck on your journey. (I'm starting mine as well currently)

        Some more suggestions:

        • I find the toggle to stick/move the window a little bit un-intuitive. Maybe you find a different UI-solution for this. (e.g. pin-/cursor-icons or a grab-handle or something else)
        • Another great addition would be graying out the responsive-classes which are currently not applied based upon the current viewport-width. Of course, there you have to mimic the tailwind-logic a little bit to really show the classes which are currently applied, but I think it's worth it.
        • A color-panel with all tailwind colors would be also 🔥
        1. 1

          @dennis_zoma awesome!!

          This is some really good feedback, really appreciated it!

          • Yup! This is what actually I'm trying to improve at the moment. I'm looking to find a better way to represent the "inspect" and "edit" states. Pin-/cursor-icons would definitely help here. I was also thinking of a button with text that changes based on the state.

          • oh I like that! This would definitely help show which classes are actually being applied. Going to add this one to the roadmap.

          • Yeah this one is already in the works 🎉

          Another feature I'm looking to add is "autocompleted suggestions" when adding a new TailwindCSS class. There is a lot of cool new stuff coming soon, really excited.

  5. 2

    Looks nice! Insta-buy for me at $9.99. I love tailwind and any productivity boost for it is worth it for me.

    1. 2

      Wohoo! Thank you @ValCanBuild! Feel free to message me on Twitter or [email protected] if you have any questions or feedback on your experience so far!

  6. 2

    I doubt that you can sell effectively to developers until you allow them to test it and ensure that it actually makes them productive.

    I see you're an engineer. Would you buy a similar tool without trying?

    Maybe consider releasing a lightweight free version with paywalled advanced features?

    Edit: I love how this dev solves the same problem. I've purchased his extensions as they made my day better: https://jasonsavard.com/

    1. 1

      Thanks for this feedback @arminas! I previously had a "live demo" on my landing page but removed it. A few others wished they could try it out on the website as well so I have decided to add it back in!

  7. 1

    I like the little demo on the home page but "Add TailwindCSS class" does not work for me. Using chrome browser.

    1. 2

      Thanks, @AntCas for catching this!! I'm seeing the same on Firefox, looks like it only works with Tailwind CSS classes that are already being used on the page. Going to work on a fix for this (:

      1. 2

        @AntCas This should now be fixed btw

        1. 2

          Works now!

          btw, it took me several tries to figure out what the toggle was or why the module was following my mouse around. Wasn't clear to me at all.

          1. 2

            Yeah, that part has been a challenge, I'm trying to think of a better way to represent the "inspect" and "edit" states of the module.

            Inspect mode: Module follows you around and you can inspect.

            Edit mode: An element is selected, the module is now draggable, and you and edit the selected element.

            Any suggestions to improve the UX here @AntCas ?

            1. 1

              I'd rely on Icons people are already familiar with.

              Inspect > Magnifying glass

              Edit > Pencil

              1. 1

                @AntCas Anthony, could you please check your email. It's important. Thank you.

  8. 1

    Hi @guillermocoding 👋 I purchased your extension, but I can’t login on the chrome version. I tried to find a way to contact you via email or twitter dm, but couldn’t.

    1. 2

      Hey @fromtheexchange! Thanks for purchasing and your patience! Oh weird, I will reach out to your email to resolve this.

      1. 2

        Thanks for your quick reply @guillermocoding! I totally forgot chrome sandboxes their https://chrome.google.com/webstore and blank tabs to prevent plugin abuse. Works great after finding the error between the keyboard and chair

  9. 1

    There is something similar on the market: https://usewindy.com/. What makes your product better?

    1. 2

      Sure @Stibn1te, I appreciate you pointing this out. So looks like with Windy you can't edit the Tailwind CSS classes of elements or add additional classes to elements. Sounds like it is more geared towards converting CSS to Tailwind CSS equivalent styles.

      So to summarize the difference, with Tailwind Flow you can also:

      Edit existing Tailwind CSS classes of elements and add additional Tailwind CSS classes to elements and see these changes in real-time.

      I actually added a "live demo" back into the website. So if you head over to www.tailwindflow.io you can actually try it out on the website itself! Let me know what you think about this! You should be able to click on the toggle and move your mouse around to inspect elements

      1. 2

        The live demo is awesome! I only wish that it suggested classes when I start typing them. For example, if I type "bg-red-" show me all the available classes like bg-red-100, bg-red-200, etc.
        Good luck with your product!

        1. 1

          @Stibn1te glad to hear you liked the demo! Thank you! Autocomplete suggestions are currently in the works! 😎

          1. 1

            Hey @Stibn1te, I added autocomplete suggestions feature and you can try it out on www.tailwindflow.io. Would love to hear what you think and any feedback on it!

            1. 1

              Awesome 🔥 It's much more friendly to use right now!

  10. 1

    While the video is cool, I believe it would be hard for you to sell the tool as is. I understand what it is, but I can’t easily think of how to get the most out of it

  11. 0

    Could've written an explanation of what it does at least. Lazy post.

Trending on Indie Hackers
I will promote your startup to 50K+ people 181 comments I made Session, a productivity timer that makes $5K/month in net profit, AMA! 37 comments Don't validate your ideas, invalidate them. 16 comments Steph Smith on making $130k w/ an ebook, creating a course in 20 days, and the latest trends 8 comments #1 on Product Hunt with an open-source project 8 comments Roast my web3 app landing page 5 comments