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

Shuffle for Tailwind CSS - Tailwind CSS editor for busy developers

by•
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!

Add a comment

Replies

Best
Maker
Hey Product Hunters! 👋 I am the maker of . 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 and for free (editors for other popular CSS frameworks). Any feedback is welcome! Thank you
Congrats on the launch! Awesome product, which technologies did you use to built this?
Maker
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:)
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 :) ❤️❤️
Maker
I'm happy to hear that! You can sign in to Tailwind Builder with your Bootstrap Shuffle account :)
Awesome, thank you for making that possible :)
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
Maker
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)
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 :)
hey there congrats on launch ! can you explain the case for each product use case ?
Maker
thanks. What do you mean? Use case for editors? I used Bootstrap Shuffle to create - Bulma Builder to create 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 :)
Awesome. Any plan to support icon libs (eg FontAwesome) instead of file upload?
Maker
Sorry for the late response. I missed the notification! That's a perfect idea, and we'll implement it in the coming weeks.
Dayummmm this is so sexy! Great job ... I've been meaning to get into Tailwind and this is getting me really inspired :) Congratulations on the launch!
Maker
thank you! Good luck with your Tailwind projects!
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!
this team is very good! congrats
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?
Maker
Unfortunately, not yet. Our technology is not ready to support "any content", but that's the inevitable future and our direction (custom components) :)
Seems great ! I had one question: does it remove unused css ? It doesn't seem to be the case. Thx !
Maker
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)
This is 🔥
12
Next
Last