Customizing Bootstrap vs TailwindCSS

General Questions
#1

Hello,

I’m familiar (in theory) that Bootstrap framework is kind of opinionated one, while Tailwind CSS is not and is more suitable for custom design.

However, things might be different with Bootstrap, so wonder if someone can share his/her opinion how easy is to make customized theme for Bootstrap and Tailwind CSS based sites with Pinegrow.

I’d like to avoid making just another in am illion regular Bootstrap site, but, otoh, do not have so much time to start from the scratch so wonder if (buying) Tailwind CSS add-on for Pinegrow could help and/or Bootstrap can be easily customized as well with the help of Pinegrow?

Decision between using Bootstrap & Tailwind also influences my choice which platform to use to build sites since one is PHP/MySQL CMS which is Bootstrap-based without ability to easily change theming/templates using some other framework, while the alternative is static-site-generator (Hugo) which provides much more freedom in choosing which framework to use for creating its themes.

Anyone?

#2

i think the choice you are posing here is a bit apples and oranges since tailwind is not a framework and will not have much in the way of jump starting your development.

you definitely don’t want to muddle thru suing both… so the question comes down to do you want to a total rewrite or not… and, how strong are your js skills

#3

@droidgoo I completely agree with your answer and assessment that Tailwind isn’t really a framework. However, I think it is funny that both links you posted describe Tailwind as “A utility-first CSS framework…”

With respect to the original posting - both have a learning curve and people have strong opinions about which gives them a better ability to build what they want. It really comes down to which you want to spend time with. They both have pluses and minuses. Some projects are better suited to one versus the other.

#4

Yeah, i noticed that too… i think these writers are so used to talking about frameworks they can’t help themselves. Someone called Bulma a framework to, when as far as i can tell looks like a similar utility CSS “frame work” gaaa!

#5

I am aware of (some) pro/cons of each project when taken in isolation, but wonder how do they compare in the context of Pinegrow, iow. how much does Pinegrow ease customizing or overriding default Bootstrap styles from one hand and does it make it easier to develop from the scratch using Tailwind CSS?

#6

Well, Pinegrow lets you use either SASS or LESS with Bootstrap, so a lot of the built-in styling can easily be changed. Right now, Bootstrap has a lot of pre-built components, like navbars, that Tailwind does not. This can speed your build, but can lend a little bit of sameness to your pages. This isn’t always bad - users expect certain page items to have a particular look.
It is really hard to compare them.
PG helps speed up builds with both “frameworks”, but you still have to know each system to an extent. You still need to know the class system in Tailwind to effectively put together a page. You need to know the components in Bootstrap to style them. Each have a number of custom controls in PG to help you out. Selection menus to add the most common and guide you somewhat in the way that system styles the page.
I think PG does an outstanding job of facilitating a build with Tailwind. You can save rulesets (sets of classes) that would otherwise have to be added individually without PG. If you use Tailwind, I think that PG is a very valuable tool.
Overall, PG speeds up putting pages together no matter the “framework” used. But, you still need some basic skills and understanding of the ecosystem you are working in. I would also say the PG is a great tool for learning these different systems. You can get instant visual feedback on what adding or removing a class or adding a component will do to your page at multiple sizes.

2 Likes
#7

Thank you very much for very useful post!

Considering that I’m more of a content-guy, than the designer, it seems that Tailwind is not the best option for my use case…

…but wonder what do you think about using UIkit instead of BS in order to avoid that “BS-sameness”? Iirc, you are the one who wrote the PG plugin for it, right?

Do you consider that UIkit is safe option to learn in regard to the future?

#8

I have to admit - I know how to use BS, UIkit, and Tailwind, but I have a horrible design eye. Most of my pages come out looking either terrible or vanilla plain. My area of expertise is mostly back-end.

I prefer either UIkit or BS over Tailwind. You are correct that I made the plugin for UIkit. It is a solid framework. But, if you have an okay design eye, any of the three can be used to output a good-looking site. None are a waste of time to learn. Each have a good chunk of ecosystem and are being incorporated into new frameworks like React, etc…

1 Like
#9

I personally like Tailwindcss for its already made classes. you don’t need to worry about creating custom classes which take lots of time thinking about what should I give a name to this class. find tailwind css components here -

#10

Because the topic from the OP is Bootstrap vs Tailwind customization I think both have their own advances compare to each other. Bootstrap also has a impressive class list: https://www.w3schools.com/bootstrap4/bootstrap_ref_all_classes.asp

But Tailwind hardly has any components and plugins compare to Bootstrap. That can be a good thing if you only need a solid design base, but a problem when you have to build all kinds of stuff based on plugins, because then you have to be a 100% sure that the plugins are technically up to date and still maintained for years. (a lot of work and investigation on Github) and with Bootstrap you can be sure it’s fully crossbrowser tested and updated when there is a problem.

When it comes to custom webdesign (creating your own stuff) you have to write your own classes anyway. You can’t always expect to be able to do everything with the standard classes of a Framework (or whatever you want to name it).

Bootstrap and Tailwind offer general classes for almost every thing and Sass or PostCSS for general customization, so it’s all up to you what makes you feel more comfortable.

For me it’s Bootstrap.