Why I now use Tailwind in all my new projects.

In simple terms, Tailwindcss is a utility-first CSS framework.

Utility-first CSS is the notion of composing many small classes together such as flex, pt-4, text-center.

Tailwind is an excellent solution for developers familiar with CSS who want to speed up the creation and design process in the long run.

While Tailwind helps you get better with CSS, I would still argue that you need to learn CSS at least to a basic extent before picking up a tool like Tailwind. And by "basic", I mean you should be familiar with stuff like the box model, using flexbox, and the basics of CSS animations and transitions.

Like many people, the first time I used Tailwind, I didn’t exactly understand all that was happening. It felt too easy and difficult at the same time. I left it for a while and came back to it and I loved it.

I'm not saying Tailwind is the best thing to happen to humanity after sliced bread. But Tailwind does make your life significantly simpler.

Here are a few reasons why I love and use Tailwind

1. It is simple to set up and highly customizable

Before I got into Tailwind, I’d used Bootstrap for a while and Bootstrap is great, no doubt. But the major issue I had was with customization. At the company I work with at the moment, Dojah, we use a lot of custom designs, spacing, and components.

And many times, we would revert to using the `style` prop in React to add an extra layer of styling because Bootstrap wasn’t just enough! Did I even mention the numerous extra classes we added in the `global.css` file because Bootstrap didn’t give us the measurements we needed out of the box?

And that's where Tailwind shines. You can easily add your extra layer of configuration by extending the `tailwind.config` file and the balance of the earth remains the same.

If you want to add your custom components, you can do that too by using the @apply directive.

And if peradventure you need an arbitrary value, you can easily add it to your className prop like so: `top-[117px]`. Easy.

2. Tailwind's Responsive Design is just awesome

Every utility class in Tailwind can be applied conditionally at different breakpoints, which makes it super simple to build complex responsive interfaces without ever leaving your HTML.

For example, if you want to change the background color of a div at a specific breakpoint, you can do that by adding the `md` prefix to the `bg` class like so: `bg-red-500 md:bg-blue-500 text-white xl:text-grey`.

Tailwind uses a mobile-first approach to responsive design, which means that by default, all of your utility classes apply at all screen sizes unless you specify otherwise. This is a great default because it means you spend less time writing CSS.

This is a lot easier than using media queries in CSS. And if you are familiar with CSS, you can easily use Tailwind's responsive design to your advantage.

3. Tailwind is incredibly performance focused

By default, CSS is treated as a render-blocking resource, which means that the browser won't render any processed content until the CSSOM is ready. This is a problem because the browser has to wait for the CSS to be parsed and applied before it can start rendering the page.

And this is where Tailwind shines, yet again. Tailwind aims to produce the smallest CSS file possible by only generating the CSS you are actually using in your project. See how they do it here.

4. Pairs well with component-based UI frameworks/libraries

Asides from the fact that you can use Tailwind in a regular HTML file, you can also use it with any UI framework/library of your choice.

I have used Tailwind with React, Next js, and SvelteKit, and it works like a charm. Their documentation is also very detailed and easy to follow.

5. Tailwind has a great community

One of the things I love about Tailwind is the very active and helpful community. There's a plethora of resources on the internet to help you get started with Tailwind, and if you are stuck, you can always ask for help on the Tailwind Discord.

Their community is also very active on Twitter. The creator, Adam Wathan posts a lot of useful tips, tricks, and new updates. You can follow him @adamwathan.

And if you are looking for a job, you can also check out the Tailwind Jobs website.

Conclusion

Tailwind is great, again. But not every project requires Tailwind CSS. Sometimes, you’re just better off with plain old vanilla CSS, or a UI framework like Bootstrap or Chakra UI. Tailwind also has its UI framework called Tailwind UI which is a collection of pre-built, fully responsive, fully accessible UI components that you can drop into your projects.

And that's it for this article. I hope you enjoyed it. If you have any questions, feel free to reach out to me on Twitter @dayoawobeku.