TailwindCSS is a CSS framework that provides what are known as utility classes. A utility class is a class that usually contains just one, occasionally two or more properties to perform some sort of specific function. For instance, all of the classes we've written so far follow this utility methodology:

<style>
.flex {
   display: flex;
}
</style>

.flex is a utility class since it only contains one property inside of it. As a result, we can easily mix and match it with other utility classes we may write, without having to use bloated CSS classes. Compare the above class to:

<style>
.hero__heading {
   display: flex;
   max-width: 1000px;
   background-color: blue;
   padding: 4px;
}
</style>

There are a few issues with writing CSS like this (the traditional way).

One: we have to think of a class name rather than use some sort of predefined standard like Tailwind provides. This wastes time and creates inconsistency between classes, especially if another developer jumps into the project midway - they may not understand what classes are available to them by default.

And two, developers will have a harder time understanding what styles a specific class provides, since there is only one name for the class yet multiple styles embedded inside of it.

With a utility framework like TailwindCSS, you eventually always know what styles a specific class provides, because each class only gets one or two styles. If there's a style you don't want to use, you don't have to jump to a CSS file to delete or edit anything, you simply just take the class off the it's currently on.

In all, after installing Tailwind, we'll have a number more classes available to us that'll enhance our CSS development experience without having to resort to old-school methodologies like mentioned above.