Why I switched from Bootstrap to Tailwind CSS

Originally posted on www.ghazikhan.in

Bootstrap is one of the most popular CSS frameworks out there. It has been around for a long time and has a huge community of developers and designers who use it to create beautiful and responsive websites. I used to be one of them.

But then I used Tailwind CSS while working on a side project recently, a
utility-first CSS framework that changed the way I think about styling. Tailwind CSS is not a UI kit like Bootstrap. It does not provide ready-made components or widgets that you can just drop into your HTML. Instead, it gives you a set of low-level utility classes that you can use to build any design you can imagine.

I was skeptical at first, because of it makes HTML ugly with all those
utility classes but after using Tailwind CSS for a while, I realized that it
is much more powerful and flexible than Bootstrap. It allows me to create custom and responsive user interfaces faster and easier than ever before. It has replaced Bootstrap as my go-to tool for web development and design.

What is Tailwind CSS?

According to the official documentation, Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It is an inline styling used to achieve a sleek interface without writing code for your own CSS. Tailwind CSS offers customizability and flexibility to transform the appearance and feel of the elements.

Tailwind CSS is not the first utility-first CSS library, but it is one of the most popular and light ones. It is a highly customizable, low-level CSS framework, and it provides all the building blocks the developer needs to build a fantastic interface for any website.

Why I love Tailwind CSS

There are many reasons why I prefer Tailwind CSS over Bootstrap, but here are some of the main ones:

• Tailwind CSS is more expressive and declarative. With Bootstrap, you have to use predefined classes that may not always match your design vision. For example, if you want to create a button with a specific color, size, and shape, you have to either override the default Bootstrap styles or create your own custom class. With Tailwind CSS, you can just use the utility classes that describe exactly what you want, such as bg-blue-500, text-lg, rounded-full, etc.
• Tailwind CSS is more customizable and flexible. Bootstrap comes with a set of variables and mixins that you can use to customize some aspects of the framework, such as colors, fonts, breakpoints, etc. However, these are still limited by the design choices made by the Bootstrap team. With Tailwind CSS, you can customize everything to your liking using the tailwind.config.js file. You can add or remove utility classes, change the default values, create your own color palette, breakpoints, spacing scale, etc.
• Tailwind CSS is more consistent and maintainable. Bootstrap relies on cascading stylesheets (CSS) to apply styles to elements based on their selectors. This means that the order and specificity of your styles matter, and you may encounter conflicts or unexpected behaviors if you are not careful. With Tailwind CSS, you apply styles directly to the elements using utility classes, which are scoped to that element only. This means that you don't have to worry about inheritance, specificity, or overriding styles. You also don't have to write any custom CSS unless you really need to.
• Tailwind CSS is more performant and efficient. Bootstrap comes with a lot of styles and components that you may not need or use in your project. This adds extra weight and complexity to your codebase and affects your page load time and performance. With Tailwind CSS, you only use the classes that you need, and you can remove any unused ones with PurgeCSS, a tool that scans your HTML files and eliminates any unused CSS from your final bundle.

How to get started with Tailwind CSS

If you want to try Tailwind CSS for yourself, here are some steps to get you started:

• Install Tailwind CSS using npm or yarn: npm install tailwindcss or yarn add tailwindcss
• Create a tailwind.config.js file in your project root: npx tailwindcss init
• Add Tailwind CSS to your stylesheet using @tailwind directives: @tailwind base; @tailwind components; @tailwind utilities;
• Link your stylesheet to your HTML file: <link rel="stylesheet" href="style.css">
• Start using Tailwind CSS utility classes in your HTML elements: <div class="bg-green-300 p-4">Hello, world!</div>

You can also use Tailwind CSS with popular frontend frameworks such as React, Vue, Angular, etc., by following the official documentation.

Conclusion

Tailwind CSS is a powerful and versatile framework that allows me to create custom and responsive user interfaces faster and easier than ever before. It has replaced Bootstrap as my go-to tool for web development and design.

If you are looking for a new way to style your web projects, I highly recommend giving Tailwind CSS a try. You may never look back either.

You can check some more Frontend Engineering articles

• CSS Nesting
• Bootstrap 5 Launched