Show HN: Tailwind Builder – online editor for the Tailwind CSS framework | Hacker News Reader

Show HN: Tailwind Builder – online editor for the Tailwind CSS framework

tailwind.build

295 pointskemyd43 comments

Open articleView on HN

Hi!

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

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")

Any feedback is welcome!

>https://bulma.dev

I've been looking for a bulma drag and drog builder for years

I'm going to test it out asap

Same. Well, I've been looking for a replacement rapid UI prototyping tool since I have recently moved away from bootstrap and adopted Bulma. This looks very, very promising!

How do you plan to compete with https://www.tailwindui.com/ or do you see it working alongside?

How is there a competition when the link you provided is a landing page with an input box to "sign up [...] to find out when it's ready"?

It's going to be a component library by the author of Tailwind, Adam Wathan. I guess my comment needed some context.

Thanks, I did not know that!

I believe in content. An editor is just a tool.

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'd really like to see something like this for the material-ui UI framework. https://material-ui.com/

From all the tools I've seen, yours is really nice. It respects both the framework and the developer by not adding crappy custom CSS, using the framework as the official documentation mandates and prioritizes a sane workflow. Congrats!

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.

Hi! We don't have a public road map with content updates, but I think about creating one (you are not the first person who asks about it).

We try to balance between editor updates and content creation. Of course, with more resources, there are more possibilities ;)

So happy to learn of Bulma.dev!!!

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.

I've been using Tailwind for a few months now and this is the perfect example of how flexible and powerful "functional css" can be.

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.

Not having to hunt down random nested CSS to fix styling is worth the cost of the slightly ugly and verbose class based functional approach.

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.

I really like the idea of life time purchases rather than subscriptions.

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.

In fact, you can buy lifetime license and use it on https://tailwind.build & https://bootstrapshuffle.com & https://bulma.dev

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.

I'd pay double for a self-hosted version, that isn't phone-home dependent. This removes a huge risk that the service will one day disappear. (If your sites go down you may not be able to release a self-hosted version)

I'm yet to try it, so pardon my question.

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.

Yes, it exports the Tailwind config. I recommend you to try our demo :)

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!

Congrats on your launch - this is fantastic, and I'll be signing up for a pro account. To echo what others have said here, having an $89 lifetime option made this an easy decision -- great value-for-money price point, and I don't have to worry about forgetting to unsubscribe from a monthly recurring bill.

I'd love a local editor or support for offline editing, as I often work whilst communiting, with spotty connectivity.

Congrats again

Very nice, I like that you're including access to your other products under the same account/license

Love this. For those of us with existing colors, plugins etc in our config, any chance you plan on allowing import of existing configs? Even if just for the colors in the beginning

My friend and I invented this category of product a few years ago but it didn't work out for various reasons mainly personal and business. https://www.redferret.net/?p=45278 (we were working as a project team on various projects, in this case it was my idea and he wrote all the code and came up with the idea of the drag and drop site builder - basically he was the inventor).

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.

While I am sure that people will be using this, this product simply and completely disregards what Tailwind was designed for: Rapid development by building from utilities in just HTML and extracting into CSS components later. To quote from the Tailwind website: "Instead of opinionated predesigned components, Tailwind provides low-level utility classes that let you build completely custom designs without ever leaving your HTML."

You can agree or disagree with the paradigm -- but if you disagree, there really is no point in using Tailwind :)

I can't agree. Tailwind is against components like "card" in Bootstrap. We do not use any custom CSS to build our components, only classes from Tailwind CSS. :)

I really don't think this is a contradiction:

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.

It's notable that the creator of Tailwind, Adam Wathan, is working on something similar [1]. Whether it fits the paradigm or not, there definitely seems to be a demand for such a thing.

On a recent episode of the Full Stack Radio podcast [2], 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.

[1]: https://www.tailwindui.com/ [2]: http://www.fullstackradio.com/123

I am going to try it out ASAP. This might be really empowering for backed developers who want to ship stuff fast because of the ease of customising components in Tailwind.

One thing I don't understand is the lack of "subtemplates" for sale. I'm not sure if that would be a good name, but I would love to be able to buy a template pack that uses vanilla Bootstrap, Bulma or anything else, and with the building blocks, creates template pages for various use cases: pricing tables, admin dashboards, my account sections, cart, search results, etc.

Certificate error: https://tailwind.build - NET::ERR_CERT_AUTHORITY_INVALID

https://bootstrapshuffle.com and https://bulma.dev - Work fine

weird. In all three I'm using Cloudflare and their certificate

Ah man! No joke, I started to outline a project nearly identical to this over the weekend. Well done though!

Good luck with your project!

Looks good! Personally I'd like to have some more form templates (could only find the contact form).

This is excellent. You should make it easier to see what the underlying css looks like imo.

You can export your project :) All sources are included

The problem with this solutions IME is that now you start to fight the editor and wasting a lot time: https://imgur.com/a/Zt0M9DX

Fun, got the same issue. Clicking around & opening stuff makes it eventually disappear.

Looks nice,

- 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?

1/ I'll invest in content creation for sure. In addition, I'll try to find authors who will sell their works on my platform.

2/ My technology is not ready yet to support "any content" but that's the inevitable future.

Is it possible to add your own templates/components and pick them from the menu?

Unfortunately, not yet. Our technology is not ready to support "any content", but that's the inevitable future and our direction (custom components). (I copied my answer from Product Hunt, someone asked the same question a moment ago. Maybe you? ;))

Does it make a responsive design or do you have to do that yourself?

Reply on news.ycombinator.com