11 ms·

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

295 points by kemyd 7y ago

milsebg 7y ago
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.
- kemyd 7y ago
  In fact, you can buy lifetime license and use it on https://tailwind.build https://tailwind.build & https://bootstrapshuffle.com https://bootstrapshuffle.com & https://bulma.dev 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.
  - camkego 7y ago
    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)
kemyd 7y ago
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 https://bootstrapshuffle.com and https://bulma.dev 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!
- deleted 7y ago
  [deleted]
- deleted 7y ago
  [deleted]
- maxencecornet 7y ago
  >https://bulma.dev https://bulma.dev I've been looking for a bulma drag and drog builder for years I'm going to test it out asap
  - james_s_tayler 7y ago
    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!
- jdefelice 7y ago
  How do you plan to compete with https://www.tailwindui.com/ https://www.tailwindui.com/ or do you see it working alongside?
  - slig 7y ago
    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"?
    - jdefelice 7y ago
      It's going to be a component library by the author of Tailwind, Adam Wathan. I guess my comment needed some context.
      - slig 7y ago
        Thanks, I did not know that!
  - 7y ago
preya2k 7y ago
Looks good! Personally I'd like to have some more form templates (could only find the contact form).
WilliamEdward 7y ago
This is excellent. You should make it easier to see what the underlying css looks like imo.
- kemyd 7y ago
  You can export your project :) All sources are included
jlabs_ 7y ago
Ah man! No joke, I started to outline a project nearly identical to this over the weekend. Well done though!
- kemyd 7y ago
  Good luck with your project!
gitgud 7y ago
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.
- dmix 7y ago
  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.
jstummbillig 7y ago
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 :)
- kemyd 7y ago
  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. :)
- milsebg 7y ago
  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.
- dimfeld 7y ago
  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/ https://www.tailwindui.com/ [2]: http://www.fullstackradio.com/123 http://www.fullstackradio.com/123
Brajeshwar 7y ago
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.
- kemyd 7y ago
  Yes, it exports the Tailwind config. I recommend you to try our demo :) By the way, you can try https://tailwind.build https://tailwind.build https://bootstrapshuffle.com https://bootstrapshuffle.com and https://bulma.dev https://bulma.dev (all exports demo project without an account, so easy test) and compare which framework (structure, config) works for you best!
T3RMINATED 7y ago
ERR_CONNECTION_RESET
greensoup 7y ago
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?
- kemyd 7y ago
  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.
timboslice 7y ago
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
jmuguy 7y ago
Very nice, I like that you're including access to your other products under the same account/license
pvsukale3 7y ago
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.
deltron3030 7y ago
Is it possible to add your own templates/components and pick them from the menu?
- kemyd 7y ago
  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? ;))
Scarbutt 7y ago
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 https://imgur.com/a/Zt0M9DX
- Zopieux 7y ago
  Fun, got the same issue. Clicking around & opening stuff makes it eventually disappear.
martypitt 7y ago
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
andrewstuart 7y ago
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 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.
bbmario 7y ago
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.
license2e 7y ago
Certificate error: https://tailwind.build https://tailwind.build - NET::ERR_CERT_AUTHORITY_INVALID https://bootstrapshuffle.com https://bootstrapshuffle.com and https://bulma.dev https://bulma.dev - Work fine
- kemyd 7y ago
  weird. In all three I'm using Cloudflare and their certificate
rbur0425 7y ago
Does it make a responsive design or do you have to do that yourself?

295 points by kemyd 7y ago

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.

kemyd 7y ago
In fact, you can buy lifetime license and use it on https://tailwind.build https://tailwind.build & https://bootstrapshuffle.com https://bootstrapshuffle.com & https://bulma.dev 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.
- camkego 7y ago
  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)

kemyd 7y ago

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 https://bootstrapshuffle.com and https://bulma.dev 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!

deleted 7y ago
[deleted]
deleted 7y ago
[deleted]
maxencecornet 7y ago
>https://bulma.dev https://bulma.dev I've been looking for a bulma drag and drog builder for years I'm going to test it out asap
- james_s_tayler 7y ago
  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!
jdefelice 7y ago
How do you plan to compete with https://www.tailwindui.com/ https://www.tailwindui.com/ or do you see it working alongside?
- slig 7y ago
  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"?
  - jdefelice 7y ago
    It's going to be a component library by the author of Tailwind, Adam Wathan. I guess my comment needed some context.
    - slig 7y ago
      Thanks, I did not know that!
- 7y ago

preya2k 7y ago

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

WilliamEdward 7y ago

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

kemyd 7y ago
You can export your project :) All sources are included

jlabs_ 7y ago

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

kemyd 7y ago
Good luck with your project!

gitgud 7y ago

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.

dmix 7y ago
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.

jstummbillig 7y ago

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

kemyd 7y ago
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. :)
milsebg 7y ago
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.
dimfeld 7y ago
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/ https://www.tailwindui.com/ [2]: http://www.fullstackradio.com/123 http://www.fullstackradio.com/123

Brajeshwar 7y ago

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.

kemyd 7y ago
Yes, it exports the Tailwind config. I recommend you to try our demo :) By the way, you can try https://tailwind.build https://tailwind.build https://bootstrapshuffle.com https://bootstrapshuffle.com and https://bulma.dev https://bulma.dev (all exports demo project without an account, so easy test) and compare which framework (structure, config) works for you best!

T3RMINATED 7y ago

ERR_CONNECTION_RESET

greensoup 7y ago

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?

kemyd 7y ago
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.

timboslice 7y ago

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

jmuguy 7y ago

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

pvsukale3 7y ago

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.

deltron3030 7y ago

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

kemyd 7y ago
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? ;))

Scarbutt 7y ago

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 https://imgur.com/a/Zt0M9DX

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

martypitt 7y ago

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

andrewstuart 7y ago

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

bbmario 7y ago

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.

license2e 7y ago

Certificate error: https://tailwind.build https://tailwind.build - NET::ERR_CERT_AUTHORITY_INVALID https://bootstrapshuffle.com https://bootstrapshuffle.com and https://bulma.dev https://bulma.dev - Work fine

kemyd 7y ago
weird. In all three I'm using Cloudflare and their certificate

rbur0425 7y ago

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