Subscribe
Sign in
Shuffle for Tailwind CSS — Tailwind CSS editor for busy developers
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 »
33
Replies
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!
Share
@sowenjub Sorry for the late response. I missed the notification! That's a perfect idea, and we'll implement it in the coming weeks.
Seems great @dawid_andrzejewski ! I had one question: does it remove unused css ? It doesn't seem to be the case. Thx !
@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)
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
@dawid_andrzejewski Congrats on the launch! Awesome product, which technologies did you use to built this?
@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:)
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?
@khalidadil_ Unfortunately, not yet. Our technology is not ready to support "any content", but that's the inevitable future and our direction (custom components) :)
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 :)
❤️❤️
@aminebenj I'm happy to hear that! You can sign in to Tailwind Builder with your Bootstrap Shuffle account :)
@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
@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)
@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 :)
@aminebenj This can be the perfect solution :) I need to think about possible problems, but I think we will move in that direction. Thank you!
@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 :)
Great product. Quickly mocked up some components and was able to transfer it to my gatsby site in a few minutes :D
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!
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.
@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.
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!