https://www.frontendeng.dev/blog/1-tailwind-is-better-than-bootstrap
Frontend Engineering For Modern WebMenu
Login
See all posts
Published on July 25, 2023
7 reasons why Tailwind css is better than Bootstrap
Tanvi Nadkarni
Tanvi Nadkarni
@wiselandinc
7 reasons why Tailwind css is better than Bootstrap
Tailwind css is better than Bootstrap in certain scenarios because it
is a low level CSS framework which lets you build your own custom
components based on your need. It is very performance focused when
used properly reduces your CSS payload significantly and ensures much
faster rendering. Chose Tailwind if web performance and
customizations are your priority.
* See Tailwind documentation.
* See Bootstrap documentation.
Table of contents
1.
1. Reason 1: Tailwind CSS generats significantly smaller CSS
payloads.
2. Reason 2: Tailwind CSS is a low level css framework hence
more suitable for customizations.
1. Tailwind
2. Bootstrap
3. Reason 3: Tailwind is default choice on frontend stacks like
NextJS.
4. Reason 4: Tailwind has an active community where as Bootstrap
is run by a company that is going through complicated
acquisition.
5. Reason 5: Tailwind has overtaken Bootstrap on NPM trends
6. Reason 6: Fine grained control of Tailwind helps your UI
stand out
7. Reason 7: Tailwind performs much better than Bootstrap on Web
Vitals score
2. Conclusion
Reason 1: Tailwind CSS generats significantly smaller CSS payloads.
When used properly for example with NextJS and similar frameworks,
Tailwind will generate significanly lower css footprint. NextJS for
example is able to look at your markup and autmatically figure out
which css classes need to be bundled with the final css payload.
Bootstrap is much more complicated to be configured in this manner.
Reason 2: Tailwind CSS is a low level css framework hence more
suitable for customizations.
Think of Tailwind as a bag full of lego bricks. You can take those
bricks and make whatever you want. Bootstrap is more IKEA components
which are much higher level and offer limited customizations. For
example Tailwind CSS does not come up with any classes for Buttons.
Bootstrap will come with default CSS for buttons.
For example if you want a simple button :
Tailwind
Bootstrap
As you notice Tailwind gives you much low level utility classes to
achieve what you want where as Bootstrap has a fixed set of button
classes.
For Tailwind you will often end up writing something like following:
.btn {
@apply font-bold py-2 px-4 rounded;
}
.btn-blue {
@apply bg-blue-500 text-white;
}
.btn-blue:hover {
@apply bg-blue-700;
}
Reason 3: Tailwind is default choice on frontend stacks like NextJS.
NextJs is extremely popular frontend framework these days and it
promotes Tailwind css over Bootstrap. Nearly all default templates
for this framework are designed using Tailwind.
Chances are if you are looking to build a new site you will end up
using Nextjs and Tailwind.
Reason 4: Tailwind has an active community where as Bootstrap is run
by a company that is going through complicated acquisition.
Since Elon Musk has acquired Twitter, the future of Bootstrap could
end up being uncertain a bit like long forgotten frameworks like
Yahoo! UI. While Bootstrap is open source and it is possible that
even if Twitter abandons its support, the framework might still be
maintained by the world, this may put its future on a rocky road.
Tailwind however despite being supported by a smaller company is far
too low level to be impacted by changes in company's fate. The
businesses built on top of Tailwind are more than capable of
maintaining it.
Reason 5: Tailwind has overtaken Bootstrap on NPM trends
If we go by NPM trends, tailwind has already overtaken Bootstrap in
popularity. This is a big achievement of Tailwind given that
Bootstrap has been around far too longer and is lot more mature
product.
Reason 6: Fine grained control of Tailwind helps your UI stand out
Tailwind will let you control finer aspects of your design such as
borders, shadows, dark-light controls, transparency etc. far better
than Bootstrap's components. Making changes to a Bootstrap button is
much harder than making a button you want using Tailwind.
If you are working with a UI designer who truly likes to make their
designs unique and not something "stock" then Tailwind might be the
tool you need rather than Bootstrap.
For example, Tailwind will not come up its own UI components like
Buttons, Accordian, Alerts and so on. You will have to build all
those on your own or you will have to use a higher level library like
Flowbite that is built on top of Tailwind. While this might seem like
a disadvantages for someone who is building a quick application, for
large companies with scale this is invariable what they end up doing
as their needs are far more specific.
Reason 7: Tailwind performs much better than Bootstrap on Web Vitals
score
It is now well known that a website that performs well on web vital
performance scores will do better on SEO. It is also better user
experience. If you check the lighthouse like tool to measure the web
page performance for both frameworks, Tailwind CSS often performs
better right out of the box. However, we must note that Bootstrap too
will do equally better as long as you use it properly.
Tailwind css has many advantanges over Bootstrap. However ultimately
right tool for the job depends more on the job and the tool itself.
If you are building an application where performance and
customizations are higher priority than speed of development, I think
Tailwind does much better than Bootstrap. However if you are looking
for ready made site wide components or themes built by third parties
then Tailwind might not be the right choice for you. We will discuss
the advantages of Bootstrap in our next article.
---------------------------------------------------------------------
See all posts
Copyright 2023 Frontend Engineering For Modern Web
Toggle theme