Front End, CSS
November 01,2022
According to the official documentation, Tailwind CSS is a utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.
The snippet below is an example of code written with Tailwind classes:
<figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
<img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
<div class="pt-6 md:p-8 text-center md:text-left space-y-4">
<blockquote>
<p class="text-lg font-medium">
“Tailwind CSS is the only framework that I've seen scale
on large teams. It’s easy to customize, adapts to any design,
and the build size is tiny.”
</p>
</blockquote>
<figcaption class="font-medium">
<div class="text-sky-500 dark:text-sky-400">
Sarah Dayan
</div>
<div class="text-slate-700 dark:text-slate-500">
Staff Engineer, Algolia
</div>
</figcaption>
</div>
</figure>
The result:
With Tailwind, the design seen above was built without a single line of CSS. That’s because of the built-in utility classes, like text-center, text-lg, font-medium, etc.
Notice that even responsive design can be done with the utility classes, like md:text-left. In this case, the md prefix applies the text-left class to all screens above 768px.
Bootstrap is the most popular CSS framework for building responsive design projects on the web. If you work with Bootstrap, you might be thinking: why should I move away from Bootstrap and start using Tailwind?
Each of them has its pros and cons. Bootstrap has utility classes too, but Tailwind has way more. Tailwind’s main focus is on the utility classes, meaning it lets you build your own designs with ease. Bootstrap, on the other hand, is more robust in the UI Kits, meaning it gives you pre-built components, like cards, nav bars, dropdowns, etc.
Many of Bootstrap and Tailwind’s functionalities certainly overlap, so choosing which one is the right one for you will depend on a few questions:
Would you rather use ready-made UI kits that will be quicker to implement, or build your own UI that will look more unique? Would you prefer a more robust solution or one that will be lighter and quicker to load?
This hallme blog post has a good comparison table about both frameworks:
Bootstrap | Tailwind CSS |
---|---|
Comes with responsive layouts, components, and utility classes | Comes with a lot more utility classes than Bootstrap |
Less flexible than Tailwind | Core does not have components or layouts classes |
Larger file size than Tailwind due to its required files | More flexible than Bootstrap |
Has been around much longer than Tailwind and is one of the most popular frameworks | Can reduce the file size using PurgeCSS to remove unused classes |
Websites built using Bootstrap are known for their responsiveness and flawless design | A newer framework that is gaining popularity |
Critics say that websites built using Bootstrap look similar | Critics say that using Tailwind CSS makes your code difficult to read |
Top-Rated Online Instructor
Ivan is the founder of Daweb Schools and top Udemy instructor currently teaching 17 courses in 4 languages with 420.000+ students worldwide.
Related Blogs