Moving Away from Bootstrap - Bulma or Tailwind?
Hi, just wanted to hear some thoughts from others about using either Bulma or Tailwind. I've spent some time to look at both and currently leaning more towards Bulma (+ Buefy) because it's free and in terms of design and ease of use, both seems relatively similar.
What are some other things you would consider, and what are some of your experiences in using Tailwind/Bulma?
Trending on Indie Hackers
I definitely recommend going with Tailwind. I've used Bulma in the past, and while nice, just wasn't the same.
I see you already figured out TailwindCSS (free) vs TailwindUI (which is just Adam's UI based on Tailwind). So you understand it's free.
"The multiple css classes which makes the HTML unreadable was one of the things holding me back too". The nice thing is it doesn't have to be this way! You can extract anything out into components you want:
https://tailwindcss.com/docs/extracting-components#extracting-css-components-with-apply
or you can do it with components (react, svelte, vue):
https://tailwindcss.com/course/extracting-reusable-components#app
Personally, I'm a big fan of being able to see immediately what I have going on with components, and know which media queries/etc will be used and applied without having to go look it up.
I've never made good looking UI's so fast. In the past (with Bootstrap) it's always been a decent starting point, but then every page ends up getting custom hacks / modifications and it becomes a mess.
Thanks for sharing your experience with Bulma and Tailwind!
Yes, it seems that Bootstrap/Bulma would not be as suitable as Tailwind if there are many custom hacks / modifications required for the design and layout.
I'll check out the links you posted about extracting to components! Glad to know the multiple css classes can be simplified and better organised.
I dove into tailwind for a project I've been working on, and it's been such a pleasure to use. You can certainly end up with a lot of classes scattered about your html, but I've found that I'm building my UI pieces much more quickly/easily than I have with bulma/bootstrap/etc. in the past. I would definitely give it a whirl if you're open to tailwind's approach.
Thanks for sharing! Yes, I think it'll take me some time to get used to a new way of doing things, and familiarising myself with the various classes in Tailwind/Bulma. Great to hear about your positive experience though, I'll give Tailwind's approach a go :-)
Tailwind CSS, 100%. It has made me so much more productive. Here's some proof, everything I've built in the last month.
Thanks for sharing! I like the clean and minimalistic design of your blog and mugshotbot! :-)
Thank you! Good luck with whatever framework you choose. If you go with Tailwind feel free to message me if you need any help.
Tailwind is free as well (www.tailwindcss.com)? Maybe you're confusing it with www.tailwindui.com? For what it's worth: Adam Watham, a fellow IH, made a BIG splash with TailwindUI. I think they did $2mln in just a few weeks. Looks like he's using part of the money to hire new people that are now working on Tailwind CSS (the open source part). I'm still a Bootstrap guy myself as I always feel that Tailwind makes your HTML unreadable, but I would definitely go for Tailwind as it looks like it has a very bright future ahead.
Heya, thanks for sharing! Yup, I think I got it confused with TailwindUI. Yeah I think I've read about Adam Wathan's launch of TailwindUI some time back, it was pretty inspiring! The multiple css classes which makes the HTML unreadable was one of the things holding me back too, but I'll consider trying and going for Tailwind based on the replies here.
AFAIK, the "messy" classes is intended by design to speed up development process. That's why I think it's very suitable for rapidly prototyping early version of the app without fighting every decisions Bootstrap/Bulma has made for you.
As you're moving forward, you should eventually wrap all those messy classes into components with more meaningful names https://tailwindcss.com/docs/extracting-components
Thanks for sharing! Yup, I just found out more about extracting to components from @davidwparker too. It makes more sense in the context of rapid prototyping now.
I would highly recommend bulma after building my product. I used to do lots of bootstrap. The part I love with bulma is customization. During my first prototype, I used vuetify. But, when you look at web as a whole these days, there are more number of sites on bootstrap and material design. With bulma, you can try your theme with some decent design knowing things won't break.
My frontend webapp is SPA on bulma + buefy and website site Instancebeat (https://instancebeat.com) is on bulma (work inprogress). I cannot find many js libraries and plugins on vue for tailwind. I believe, that's crucial when building a complete web application and bulma+buefy would be a right fit.
Thanks for sharing! Yes, I quite like the components on bulma too, and buefy helps to speed up any design elements that require a bit of js. I think having some js libraries and plugins would be very useful too, so thanks for sharing about the lack of js libraries and vue plugins for tailwind. In any case, I hope there'll be more js packages in future given the rate of adoption for tailwind.
Built habitate.io on bulma! Check out https://community.habitate.io to take a look at the product.
Hey, it's pretty awesome, really like how the rocket icon turns into a CTA button when you hover over it!
I used Bulma in one project about a year back but recently built my website using TailwindCSS and I was really delighted.... I am usually quite uncomfortable in dealing with weird CSS issues and with TailwindCSS it was quite a smooth journey.
Thanks for sharing about your experience with Bulma and TailwindCSS! Yes, I know what you mean about the weird CSS issues, glad to know that using Tailwind is quite smooth - I look forward to trying it out even more :-)
Been working aaa lot on with Bulma, aroind 2 years and now I am goint to Tailwind
Why moving?
Well, for me design is really important and Bulma is too opinionated.
I have examples.
My first project. Bulma and Buefy.
My second project. Bulma only.
Now I am building my newsletter's home page with
Tailwind, so far loving it...
With Tailwind I have barely used custom css, only the gradients.
But for the Bulma sites I still used a lot custom css...
If you want to play around with the templates on Wicked Templates feel free to download the free ones they are only using the CDN...
Hope it helps.
Thanks for sharing about your experience!
I really like the design and layout of your websites, they help me get a better idea of the Bulma / Tailwind design too.
I've bookmarked colorsandfonts.com for future design reference, and will try out some of the free templates on Wicked Templates :-)
Hey Time, absolutely anytime.
How nice that you bookmarked it. Really cool!
If you need anything specific with Bulma or resources don't hesitate to ask, I am always happy to help.
Like you I was thinking about Bulma or Tailwind and ended up with Bulma so far. Mainly because I don't do a component design system and so clutter of classes was not at all appealing to me (I understand it might be a good pair with React or smth).
Now Bootstrap 5 is behind a corner and maybe it's worth to compare with Bulma again.
Thanks for sharing, glad to know I'm not the only one stuck in deciding between Bulma or Tailwind! Yeah, the clutter of classes is something I'm not really used to as well. I've spent some time tinkering with Bulma already and found it pretty okay, but I'll probably also put in the same amount of time tinkering with Tailwind and see which framework I feel more comfortable with.
I tried switching from Bootstrap to Bulma a while ago based on the recommendation of a friend. Bulma is a good css framework but I found that it was mostly the same as Bootstrap in terms of functionality and productivity, but with fewer features and a handful more quirks. I decided to switch back to Bootstrap.
If you're still using BS, have you tried Halfmoon? What I like about it is that it's very similar to BS but generally uses less code. You can see a comparison for a toggle switch here:
https://www.gethalfmoon.com/docs/introduction/#bootstrap-like-classes
Heya, thanks for sharing! That's interesting to hear, could you share a little more about what features Bulma is lacking compared to Bootstrap and what quirks there are?
At the time, Bulma didn't have utility classes which was the biggest problem. However, they recently added them (https://bulma.io/documentation/helpers). So at this point, there aren't as many differences.
If you look at this
https://getbootstrap.com/docs/4.5/components/
vs.
https://bulma.io/documentation/components/
You'll see that Bootstrap has a few more components. Whether they are important is up to you.
The quirks I ran into was when I was putting Bulma elements and components within each other, some of the padding/margins were conflicting/collapsing. It's possible that I wasn't supposed to do that or that I was doing it incorrectly, but I haven't had any problems in Bootstrap putting components within components.
In my opinion, I think Bulma and Bootstrap are more or less the same, one's not clearly better than the other. Tailwind is a very different animal since it's all utility classes. In my opinion, if you mostly are happy with Bootstrap/Bulma defaults, then you're better off with their pre-built components. However, if you want to change most of the defaults, then you're going to spend a lot of time "fighting" the framework and you're better off building everything from scratch with Tailwind.
I like Bootstrap's defaults, and I make only minor modifications here and there. The idea of rebuilding everything with Tailwind does not appeal to me.
Thanks for sharing more in detail! :-)
Knowing about the padding/margin quirk within components in Bulma would definitely help when I'm doing any frontend work in future.
I'm leaning more towards pre-built components too as they help shorten the development time (assuming they don't cause much issues with any quirks). I guess if I'm trying out the TailwindCSS approach in future, I might get TailwindUI as their components look pretty nice too.
I also prefer the prebuilt components for development speed. In the future if I feel like I’m “fighting” against Bootstrap then I’ll give tailwind and tailwind ui a try. But for now Bootstrap’s prebuilt components are saving me a lot of time.
https://dev.to/irishgeoff11/bulma-vs-tailwind-32c8