Tailwind Builder is the first genuinely advanced editor for the Tailwind CSS framework. 140 ready-to-use HTML components and convenient settings will speed up your development process! Try Demo »
Embed
Featured
discussion
Would you recommend this product?
Dawid Andrzejewski
Maker
Founder at Shuffle.dev
Hey Product Hunters! 👋 I am the maker of Tailwind Builder. It's an online editor for the Tailwind CSS framework. 🤔 What's Tailwind CSS? According to the authors, it's "a utility-first CSS framework for rapidly building custom designs". According to supporters, it's "the best thing that happened to CSS in recent years". 💪 Tailwind Builder is an online tool to help you work with that framework faster. Note: You don't need to know Tailwind CSS to use our editor. You can confirm that in the demo (you don't need to sign up). Features: * 140 ready-to-use HTML components (drag & drop). * All Tailwind settings are available with convenient pickers. * Autocomplete for CSS classes. * Live edit & online preview. * You can export code to HTML and CSS (compiled version) and Pug and Tailwind config (sources). * Easy build ("npm run build") Bonus: All Tailwind Builder users automatically get access to Bootstrap Shuffle and Bulma Builder for free (editors for other popular CSS frameworks). Any feedback is welcome! Thank you
Share
Jake Prins
I make things.
@dawid_andrzejewski Congrats on the launch! Awesome product, which technologies did you use to built this?
Share
Dawid Andrzejewski
Maker
Founder at Shuffle.dev
@jake_prins Thanks! The editor is based on the same technology I used to create Bootstrap Shuffle and Bulma Builder. A lot of JS, and PHP&Symfony in the back-end. I use small services in node & express to compile Tailwind config to CSS (or sass to css in Bootstrap/Bulma case). Landing page has been created in.. Tailwind Builder:)
Share
Jake Prins
I make things.
@dawid_andrzejewski Kudos for making a really cool and easy to use builder!! :) Re your feedback request, sharing a couple of feedback points here- https://app.usebubbles.com/40305...
Share
Amine BenjellounCTO @Mailwarm
I m already a user of your bootstrap version. And as i jumbed on tailwindcss i was waiting for this product. I m very happy to see that coming today :) ❤️❤️
Share
Dawid Andrzejewski
Maker
Founder at Shuffle.dev
@aminebenj I'm happy to hear that! You can sign in to Tailwind Builder with your Bootstrap Shuffle account :)
Share
Amine BenjellounCTO @Mailwarm
@dawid_andrzejewski Awesome, thank you for making that possible :)
Share
Amine BenjellounCTO @Mailwarm
@dawid_andrzejewski I tried it, and I m happy with it. But i struggle making the menu button (burger) or the gallery with slider work. Is there anything that i m doing wrong ? Or did you choose to use just tailwind so no js, and it make it impossible to make them work? thank you
Share
Dawid Andrzejewski
Maker
Founder at Shuffle.dev
@aminebenj You're right. Bulma Builder and Tailwind Builder do not have any external dependencies, just like these CSS frameworks. It may change in the future, depends on users' feedback:) (like your comment)
Share
Amine BenjellounCTO @Mailwarm
@dawid_andrzejewski Good, I think it can be interesting if you make both. Just add some sections with a tag (using JS). So you let the user choose if he want to add a section with or without JS :)
Share
Alex Conway 🇿🇦
Co-founder Unite.community
Dayummmm this is so sexy! Great job @dawid_andrzejewski ... I've been meaning to get into Tailwind and this is getting me really inspired :) Congratulations on the launch!
Share
Dawid Andrzejewski
Maker
Founder at Shuffle.dev
@alxcnwy thank you! Good luck with your Tailwind projects!
Share
This looks incredible! I have been messing with Tailwind on some side-projects but still am a bit meh with CSS. This could be a game changer!
Share
this team is very good! congrats
Share
Khalid AdilChief Thing Maker, Simply Human
If I had some custom sections that I use often and wanted to include them (html/css) with a screenshot of how the section looks in a separate menu item, is that possible?
Share
Dawid Andrzejewski
Maker
Founder at Shuffle.dev
@khalidadil_ Unfortunately, not yet. Our technology is not ready to support "any content", but that's the inevitable future and our direction (custom components) :)
Share
Seems great @dawid_andrzejewski ! I had one question: does it remove unused css ? It doesn't seem to be the case. Thx !
Share
Dawid Andrzejewski
Maker
Founder at Shuffle.dev
@a_franck we don't remove any code automatically. When you export the project you can remove anything you want in the src/ directory and recompile Tailwind :) We use default Tailwind config with few changes (font for body/heading and background/text colors for faster prototyping online)
Share
This is 🔥
Share
Timothy ArnoldFreelance UI Developer
TOP!!!
Share
hey there congrats on launch ! can you explain the case for each product use case ?
Share
Dawid Andrzejewski
Maker
Founder at Shuffle.dev
@francoolaami thanks. What do you mean? Use case for editors? I used Bootstrap Shuffle to create https://bullets.news - Bulma Builder to create https://shuffle.dev and Tailwind Builder to create its landing page. In all three editors use case is the same - fast prototyping HTML templates, only CSS framework is different :)
Share