Shuffle
An online editor for Tailwind CSS, Bootstrap, and more!
Start new thread
Dawid Andrzejewski

Shuffle for Tailwind CSS - Tailwind CSS editor for busy developers

by
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 Âť

Add a comment

Replies

Best
Dawid Andrzejewski
Maker
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
Jake Prins
@dawid_andrzejewski Congrats on the launch! Awesome product, which technologies did you use to built this?
Dawid Andrzejewski
Maker
@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:)
Jake Prins
Ghost Kitty
Comment Deleted
Bengeekly
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 :) ❤️❤️
Dawid Andrzejewski
Maker
@aminebenj I'm happy to hear that! You can sign in to Tailwind Builder with your Bootstrap Shuffle account :)
Bengeekly
@dawid_andrzejewski Awesome, thank you for making that possible :)
Bengeekly
@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
Dawid Andrzejewski
Maker
@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)
Bengeekly
@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 :)
Francoo
hey there congrats on launch ! can you explain the case for each product use case ?
Dawid Andrzejewski
Maker
@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 :)
Arnaud Joubay
Awesome. Any plan to support icon libs (eg FontAwesome) instead of file upload?
Dawid Andrzejewski
Maker
@sowenjub Sorry for the late response. I missed the notification! That's a perfect idea, and we'll implement it in the coming weeks.
Alex Conway
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!
Dawid Andrzejewski
Maker
@alxcnwy thank you! Good luck with your Tailwind projects!
Chad Wilken
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!
gus
this team is very good! congrats
Khalid Adil
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?
Dawid Andrzejewski
Maker
@khalidadil_ Unfortunately, not yet. Our technology is not ready to support "any content", but that's the inevitable future and our direction (custom components) :)
Franck Achkouyan ☀
Seems great @dawid_andrzejewski ! I had one question: does it remove unused css ? It doesn't seem to be the case. Thx !
Dawid Andrzejewski
Maker
@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)
Bruce
This is 🔥
Timothy Arnold
TOP!!!
Oliwer Kotecki
Nice solution :)
Constantin
Solid! ❤️ Tailwind and ❤️ love the idea of the builder.
Todd German
Congratulations on the launch! I'm excited to see where this goes. Is there a way to build out custom pages with basic components i.e. buttons, input fields, images, etc... or is it just with the predefined templates? I'd like to build out a couple of pages but there are no templates for them just yet.
Dawid Andrzejewski
Maker
@montekrysto Hi! Currently, you can use predefined components only. We already work on custom HTML structures, so you'll be able to build your components from low-level elements like button, input, etc.
Andrew Cetnarskyj
Great product. Quickly mocked up some components and was able to transfer it to my gatsby site in a few minutes :D
Lawrence Ip
Purchased a few days ago and just begun having a play, what to say? How about, "Holy Toledo Batman, Looks Like the Riddler's Game is UP!" Ok... Okay... Before you guys jump on me for the Batman reference; this is no toy! Having said that, it's so much fun being able to smash out a landing page in under 5 minutes. I'm so ditching Bootstrap. To finish of the job, I just open up the zip and get to work in Pinegrow & Atom. I'm very impressed. Kudos and a big THANK YOU!