Summary
We’re experiencing a renaissance of amazing web platforms and responsive designs. Responsive user interfaces have mostly been implemented with libraries like Bootstrap, Foundation, Bulma, or good old-fashioned media queries.
We have used these UI kits with ease to implement directives to achieve the exact UI and proper responsiveness we require with less code. But the big question is, have we really been doing it right?
What if there was a way to achieve responsive UI without being bound by the rules of any UI kit? Is there a way to achieve responsiveness and still keep our custom user interface designs? Well, let’s find out.
Tailwind CSS has recently benefited from an upwards trend of popularity and there is an increasing amount of front-end developers who choose to stick with the new CSS Framework as a new alternative. In this article, I want to explore the differences between Tailwind and Bootstrap and give you as much insight as possible on this topic.
Table of contents
- Bootstrap
- Tailwind CSS
- Community
- Is this really the future?
1.Bootstrap
The initial release of Bootstrap happened on August 19, 2011, nearly 9 years ago. Fun fact is that it was created during a hackathon by the Twitter development team and later it was developed and maintained by Mark Otto, Jacob Thornton, and a small group of core developers.
Shortly it became one of the most popular CSS Frameworks out there and it currently is the sixth-most-starred project on GitHub and it is currently being used by millions of developers worldwide.
2.Tailwind CSS
According to the project’s Github contributor list, the project was originally developed by Adam Wathan and the first release dates back to October 22, 2019. It is described as a utility-first CSS framework and they claim that development is faster with this new method.
Having introduced some basic facts about the two frameworks I would like to layout the comparison benchmarks that we will delve into in this article. We will talk about the development process, the number of components, performance, and community.
What does “utility-first” even mean?
A utility-first library simply means that unlike Bootstrap, Tailwind doesn’t give us automatically prestyled components. Rather, it gives us utility classes that help us style our component in certain ways and allows us to build our own classes using these utility classes. Let’s explain this further using two simple examples.
Example: Simple button demo
From above the example, we can see how easy is it to implement button components with Tailwind CSS
The base set of components
In this case, I must say that Bootstrap has a clear advantage because of its wide set of components including cards, modals, accordions, nav tabs, and so on. Tailwind CSS has only a handful of components according to their documentation, the full list being:
- Alerts
- Buttons
- Cards
- Forms
- Flexbox grids
- Navigation
This compared to Bootstrap’s 21 sets of components. However, Tailwind CSS does have a lot more utility classes than Bootstrap does, and using them you can create any type of component you want.
Is there a performance advantage to using Tailwind CSS?
The default Tailwind configuration comes with 36.4kb minified and g-zipped. Compare this to Bootstrap at 22.1kb — Tailwind is 14.3kb heavier. You might be thinking, Is this really the way to go in terms of performance?
The reason for this is simple: Tailwind comes prepacked with a lot of options and styles for users to choose from, and it packs all these variations to reduce the tendency to write your own CSS. Fortunately, Tailwind comes with a few strategies you can use to keep your generated CSS small and performant.
Limit your color palette
Due to the fact that all the built-in utility modules in Tailwind use the plugin system under the hood, it is possible to delete a ton of code and make the plugin system the way new classes are registered inside Tailwind.
This makes it possible to have only code we actually need in projects while ignoring everything else — unlike Bootstrap, in which there is a lot of overhead code. This upgrade feature shortens the build time from 158s to 8s.
We can get the exact amount of color variations we need in a project, like so:
READ THE FULL BLOG...
CLICK HERE:
https://www.bitontree.com/blog/tailwind-css-vs-bootstrap
Top comments (0)