Bootstrap and Tailwind, two CSS frameworks, two eras

I bootstrap, you bootstrap, he bootstrap, we bootstrap... Oulah, what's wrong with me ... ?

Hello, hello?
This week, we're going to talk about CSS, and more specifically about CSS frameworks, the best-known of which is Bootstrap, and the new kid on the block, Tailwind, who's trying to steal its number 1 spot...

Bootstrap released in 2011

This framework arrived at a time when the web looked nothing like it does today - just to give you another date, Chrome came out 3 years before.

Bootstrap was a huge bombshell at the time, making responsive websites in 2011 was a real pain, and Bootstrap simplified the creation of responsive websites for many developers (including myself).
As a result, it quickly became very popular.

The thing is, Bootstrap's responsiveness is done by means of "Hack", which works, but do we still need it today?

Bootstrap problems in 2022

In fact, back in 2011, it made complete sense to use Bootstrap in your project just for responsive. Except that in the meantime, native CSS has evolved, browsers are not at all the same, and in fact grids are now basic CSS functions.

The problem is that, since Bootstrap has been so present with devs, it can be found just about everywhere (in fact, even the theme of this site is Bootstrap...).

And where it's a problem is that there are "very small, simple projects" that import all the Bootstrap CSS right from the start, when it's not necessarily necessary.

I'm not saying that Bootstrap should be banned, but I'd just like to remind you that Bootstrap's "grid" is basically a hack to give the illusion of responsiveness, even if it has improved over time.
If you take the time to look at Bootstrap's source code, you'll see that even version 4 doesn't use native CSS APIs for Grids.
This is a pity and reduces performance; using compiled code, i.e. the browser's native CSS functions, will always perform better than interpreted code.

Finally, even if Bootstrap is available in SCSS, generally the cleanup is not done and all CSS is embedded in production projects.
As a result, you end up with a very heavy CSS, and in the end, you don't necessarily use all the components offered by this CSS.

This heavy CSS is due to the fact that Bootstrap, by definition, provides access to turnkey style classes such as "btn" and "btn-primary".

Tailwind, the utility framework

First and foremost, Tailwind isn't clear-cut. Unlike Bootstrap, there are no classes like the "btn" I mentioned above, so to create a button you'd rather use
"bg-blue-700 text-white px-5 py-3 font-bold rounded".
Don't leave just yet! You'll see why it's cool.

A watcher on your HTML code to create a tiny CSS

You didn't leave? Cool.
The cool thing about this method is that they provide a "file watcher", which will parse your HTML to give you a CSS file with only the classes you use.
This will then generate a "baby CSS file" containing only what you need, and, if you look at the documentation, you'll realize that it's even compatible with React's TSX / JSX - ain't life grand?

For those who don't want a lot of classes in their HTML

I get it, you don't think it's elegant... OK.
Well, they've thought of that too: it's perfectly possible to use an @apply in your CSS class.
Create your class, for example ".btn-blue" and put in " @apply bg-blue-700 text-white px-5 py-3 font-bold rounded;" and voilà... You've recreated your CSS class that you can modify just once... instead of going through all the HTML each time.

A grid system comparable to Bootstrap

Once you've seen the grid system in a CSS class, you'll be vaguely reminded of it if you're coming from Bootstrap.
The difference is that "Tailwind" uses the browser's native CSS APIs.

Conclusion

This week, a simple article to encourage you to take a look at Tailwind if you're a big Bootstrap user - curiosity never hurt anyone?
All that's left for me to do is to wish you a very good week and see you next week?