I am the author of Tailwind Builder. I launched it today!
It's the first genuinely advanced online editor for the Tailwind CSS framework.
I based it on the same technology I used to start https://bootstrapshuffle.com and https://bulma.dev
* 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")
Any feedback is welcome!
Do you have any roadmap when it comes to more content? I think that's what is king with those tools. I use them because I don't want to hand-design markup for yet another pricing table or any other generic startup design component I need. I like being able to drag and drop them around, and then just go back to my backend code and make that shit work.
I would love to have a more extensive gallery, specially when it comes to items: search results, filtering, sorting, grid view, list view, swipers, etc.
We try to balance between editor updates and content creation. Of course, with more resources, there are more possibilities ;)
A month ago, I offered Adam to use my editor (he is the author of TailwindCSS/UI).
As I understand, he creates static UI components that you can copy & paste to your project. My editor can be a nice feature for that library.
See this tweet: https://twitter.com/kemyd/status/1177659753251651584
I think that a lot of such builders can co-exist, and the content will be the differentiator.
If you want to know more about my philosophy, please visit https://shuffle.dev
I've been looking for a bulma drag and drog builder for years
I'm going to test it out asap
One thing I would really, really love is more Components found in enterprise SaaS ui. Stuff that you find in any reasonable component library
I appreciate it might be hard to do with just static markup, but sometimes when using rapid prototyping tools I want to get back markup I can edit and then it becomes a real project other times I just want to test a lot of different layout ideas and see how they look on the page without wiring up a lot of components first because I can do it at the end when I've settled on the layout.
The other thing that would be quite magical is ability to add your own custom snippets into your library. That'd be just perfect.
Components truly encapsulate everything, by including all styling in the HTML, the only dependency is tailwind.css.
Although the markup looks messy (at first), you get the advantage of high portability of components, high flexibility and super fast development time.
You can copy any other Tailwind block of code and it should work predictably on your site. Which is very rare in the CSS world.
The hardest part of this is forcing yourself to use the system instead of side stepping it.
To minimize the risk that your site goes down (or is economically unstable at some point in time), you could consider making this a paid downloadable app.
If my sites go down, I'll release a self-hosted version of the service, so you'll be able to run the editor on your local machine.
Does it generate a tailwindconfig.js that I can replace in any tailwind project?
A good friend introduced me to Tailwind about a year back but I was not sure where to fit in. I've been wary of rolling out a totally new custom framework from scratch but also do not want to wander anywhere near the paths that can lead to a Bootstrap-esque framework.
About a month back, I decided to try out TailwindCSS myself before deciding the fate of the next 5+ years of front-end styling of a big-enough company. I was totally amazed with what it can do. So, my thumb rule was TailwindCSS + something to purge the un-used styles. I can even expose the TailwindConfig to other apps (React, Custom, etc) so they can just pick up the 'Styleguide' and start off in whatever they are writing.
The best part I realized that I can optionally drop Sass if I want and stick with just plain CSS/CSS4 + Tailwind and let PostCSS handle the processing.
By the way, you can try https://tailwind.build https://bootstrapshuffle.com and https://bulma.dev (all exports demo project without an account, so easy test) and compare which framework (structure, config) works for you best!
I'd love a local editor or support for offline editing, as I often work whilst communiting, with spotty connectivity.
Since then there has been an explosion of site builders following this exact pattern.
This is a really nice implementation and looks like he has worked out the business model too. Very nice job.
You can agree or disagree with the paradigm -- but if you disagree, there really is no point in using Tailwind :)
First, Tailwind encourages you to use apply to build reusable components,
second, Taking building blocks from a generator like the one posted here, makes at least to me more sense than it would be for Bootstrap: You see a component and can (thanks to utility classes) see how it's built and change the appearance relatively fast. With Bootstrap you would basically just add a component class and that's it - customizing is more complex then.
On a recent episode of the Full Stack Radio podcast , Adam talked about his own upcoming Tailwind UI release and said that he hoped the utility class design of Tailwind would enable people to use the predesigned components as a starting point and easily customize them, should they desire.
https://bootstrapshuffle.com and https://bulma.dev - Work fine
- What are your plans to expand the amount of items?
- What do you think about the option to add your own build items, and maybe share them across users?
2/ My technology is not ready yet to support "any content" but that's the inevitable future.