When we think about CSS frameworks like bootstrap or material-UI, we think of them as a great tool to fasten our development speed. However, all these frameworks suffer from the same problem that they all look and feel the same. When you visit any of these sites, they look like an identical adaptation of a popular base.

It is the primary reason why I refrain from using these frameworks because the process of giving the personal touch to these frameworks is like working in the opposite direction of the framework, which, is in itself a counterproductive act. It not only affects productivity but often clutters the folder structure with overriding rules.

Therefore, while working on a large project, I always use custom CSS styles and a pre-processor like SASS. This way I have more authority over the design, but it is not the best solution for the problem. The best solution to this problem is a utility-first CSS framework like Tailwind CSS.

What is the Utility-first CSS framework?

Tailwind CSS is the most popular CSS framework in 2020 stateofcss survey

When we work with frameworks like bootstrap, they have some predefined components like buttons with `btn` class, etc. Now, every change is either in the direction of the framework, giving the site a homogenous look, or in the opposite direction of the framework which is harming productivity.

Tailwind CSS provides low-level utility classes that let you build completely custom designs without ever leaving your HTML. That is, you can design your HTML directly within HTML, and that too with a higher degree of customization. Utility classes provide the user the freedom to sketch the site according to their design preference.

It is more like writing the inline CSS styles, but in a more elegant and much cleaner way. Code example:

<button class = "bg-red-500 text-white font-bold py-2 px-4 rounded">
    Sign in
</button>

Here you will find that there is no `btn` or `button` class pre-applied. We just wrote classes to design our button the way we want it to look. And  not only this, if I want to add a `hover` effect it is as simple as adding:

hover:bg-blue:400

Advantages of the utility-first approach

  • You never leave the HTML:-

Utility-first CSS feels like writing inline CSS. You want a hover effect, just add the class to the markup. No need of switching between the HTML-CSS files.

  • Cleaner folder structure:-

No more need for separate files like:

navbar.scss
header.scss
footer.scss
hero.scss
variables.scss
global.scss
cards.scss

Simply 2 files will do: 

global.scss
tailwind.scss


  • Faster Development:-

The primary purpose of using any framework is to increase the development speed. Tailwind does not shy away from speedy development.

Want a box with a red border:-

<div class="border border-red">	Red border Box</div>

Equivalent vanilla way:-

HTML

<div class="box"> Red border Box </div>

CSS

.box {	border: 1px solid red;}


  • Performance

Tailwind automatically removes all unused CSS when building for production, which means your final CSS bundle is the smallest it could possibly be. In fact, most Tailwind projects ship less than 10KB of CSS to the client.

  • Pseudo Classes and Responsiveness

When I say you never need to switch between files, I meant it. Even for adding things like hover effects, responsive design, you can do all in just an HTML file.

<button class = "bg-red-500 text-white font-bold py-2 px-4 rounded hover:bg-red-400">
    Sign in
</button>

Similarly, for adding responsiveness, we can use classes like:`md:flex`, that means when the screen size is more than medium (tablet), the items will be flex and, on smaller screen sizes, they will stack on top of each other. That is, you'll get responsive behavior without leaving the HTML file.

<p class="text-base md:text-lg">
    The quick brown fox jumped over the lazy dog.
</p>

Downfalls of the Tailwind CSS

As futuristic and revolutionary tailwind CSS is, it does have some flaws.

  • Repeating classes:-

While the idea of having utility classes is really great, there are some issues with repeating these classes. For example:-

<h1 class="bold text-2xl py-2 text-blue">Title One</h1>
<h1 class="bold text-2xl py-2 text-red">Title Two</h1>
<h1 class="bold text-2xl py-2 text-green">Title Three</h1>

While working with CSS, I can write a common class for repetitive styles and add that same class to markup.

  • Readability:-

It is the biggest downfall of tailwind CSS, readability. While adding these classes, the readability can be challenging.

Suppose you have a button like:-

<button class="bg-red-500 text-white font-bold py-2 px-4 rounded mt-5 hover:bg-red-400 border border-red">
    Read More
</button>

Conclusion

Should you use it in 2021? Definitely!

As discussed above, tailwind CSS comes with some downfalls, but the advantages it offers are far bigger than these tradeoffs. The utility-first approach of the tailwind CSS makes it a great framework choice for design-oriented developers. In the end, choosing tailwind CSS for your next project can be a worthy inclusion.