10 reasons you should use TailwindCSS for your next project

In this article, I will analyze why you should use TailwindCSS for your next project. And will this new CSS framework replace Bootstrap?

What is TailwindCSS?

Tailwind is a utility-first CSS framework used to quickly build modern user interfaces without worrying about naming conflicts. The utility class name that describes the functionality of the class, such as setting padding to 4px, can be named topnav. Feel free to name it, but it’s still carefully curated by Tailwind making it super simple to create beautiful and responsive websites without writing a single line of CSS.

Here are the top 10 reasons I choose Tailwind CSS:

10 reasons you should use TailwindCSS for your next project

1. Tailwind saves more time

Tailwind’s utility classes save you the headache of writing and maintaining huge piles of CSS code from scratch.

A Tailwind utility class corresponds to a small set of CSSs. Eg:

• p-4 means padding: 1rem (numeric suffixes in Tailwind are usually multiples of 0.25 rem)
• m-4 means margin: 1rem
• text-lg means font-size: 1.125rem; line-height: 1.75rem
• Putting it all together, this HTML already has CSS Tailwind enabled

<div class="p-4 m-4 text-lg">
  Hello world
</div>

The equivalent of this basic HTML:

<div style="padding: 1rem; margin: 1rem; font-size: 1.125rem; line-height: 1.75rem">
  Hello world
</div>

With the help of these utility classes, we don’t have to build everything from scratch and can create better websites in less time.

2. Utility Classes Follow the Single Responsibility Principle

Tailwind’s utility classes are designed to serve a specific purpose. Eg:

• w-4 means width: 1rem;
• bg-transparent means background-color: transparent;
  Some utility classes also encapsulate more than 1-3 CSS declarations at once.

These classes are almost like shortcuts to writing code directly with style attributes. For many years now this was often considered annoyingly verbose, but recently many developers have argued that once you get used to the utility class style, you’ll find that it means Your HTML elements don’t interfere with each other, which simplifies debugging.

For example, when there is no .card class and no site-wide .featured class, nothing will happen with:

<div class="featured card">

Tailwind CSS includes thousands of such independent utility classes, and you can combine them creatively to build highly customized website elements, no matter where you place them on the page.

3. Tailwind’s material is Top-Notch

TailwindCSS is not only simple to code but also simple to document.

It’s a great place to start learning about how the framework works. You can easily access any theme on their website. Searching for width will take you to the width guide, but searching for w-8 as well, so document access becomes easier, even for developers who are new to CSS frameworks.

4. A large and growing community

It’s always a good idea to gauge the popularity of a framework before switching to it. For frameworks with a solid following, it’s easier to find great developers and supportive online communities to help when you’re stuck.

TailwindCSS’s wide popularity in the developer community means that potential issues can be resolved more easily with community support.

5. No more Media Queries

Every utility class in TailwindCSS can be conditionally applied at different breakpoints, which means we don’t have to create files media queries specifically to make responsive components. Tailwind, by default, provides 5 different breakpoints:

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px
• 2xl: 1536px

See this example:

<img class="w-16 md:w-32 lg:w-48" src="https://anonyviet.com/10-ly-do-ban-nen-su-dung-tailwindcss-cho-du-an-tiep-theo/...">

Our image has a default width of 4rem, which will be overridden by 8rem and 12rem as the viewport grows to breakpoints md and lg, respectively.

If the default breakpoints are not enough, we can also create custom breakpoints.

6. Don’t Create Components

Tailwind doesn’t come with reusable component styles like .modal or .navbar, but it allows us to create reusable custom classes from other Tailwind classes with @apply.

We can create a custom utility class to learn how the above works.

.card {
  @apply w-20 h-20 bg-blue-700;
}

Now that we have created our own custom .card class in TailwindCSS and we are free to reuse it as if it were a Tailwind class like any other class. (Included as part of the definition of a class other than @apply.)

7. Remove unused classes

To make our development experience smooth, Tailwind generates thousands of utility classes, most of which are not used in the final product version.

To overcome this problem, Tailwind has the feature to remove any unused utility classes from the final product version.

Removing unused classes will significantly reduce the size of the CSS file sent to the user, resulting in a faster loading web page.

8. Personal style

Like many other frameworks, TailwindCSS also has its own style. An example is the sizing elements used. .m-4 means 1rem and m-5 means 1.25rem. So what about the 0.25rem in the middle?

We consider these helpful comments because they promote design consistency. It is rare to need more detail than the options we give with Tailwind. But, if we need to, it’s configurable and it’s only CSS, so we can always set up our own styles.

9. Avoid naming rules

Naming classes in CSS is a big deal (seriously, have you ever been in a meeting just to discuss class names? again).

Despite popular naming conventions, like BEM, Tailwind wins the battle by eliminating the need to write custom CSS classes. Usually Tailwind’s utility classes are enough to build a web.

10. Feels Like Writing CSS

TailwindCSS makes it easy to create great user interfaces for both junior and senior developers with the help of utility classes. As mentioned in reason 2, widgets are mostly just a class reference for a particular style. You’ll quickly feel like writing CSS, compared to learning a framework like Bootstrap, which involves learning a system of named components.

However, TailwindCSS is not perfect

Tailwind, like any other framework, is not perfect. The most common problem is that long strings of classes can become unreadable, even in common use cases.

But after an overview, the positives of TailwindCSS far outweigh the negatives.

Also, you can also see more beautiful CSS designs here.