Why use Tailwind CSS

If you're not familiar with it, Tailwind CSS is basically a bunch of ready-to-use CSS classes that cover most styling cases and it's easy to learn.

There's a few reasons you might want to learn how to use Tailwind or, at the very least, familiarize yourself with what it is.

Tailwind CSS comes ready to use

You don't have to spend a ton of time setting up global CSS styles.

In fact, you don't even have to write CSS at all if you don't want to.

All you have to do is import Tailwind CSS into your project and add classes directly in your HTML.

<!-- this code produces a centered heading in monospace font with some vertical padding -->

<h1 class="text-xl text-center py-2 font-mono">Copenhagen, DK</h1>

Tailwind CSS is easy to learn

The naming system of Tailwind is pretty intuitive and easy to pick up.

Values are composable and consistent across properties. for example:

• If you want to style text then you use the prefix text-
• Small font size is text-sm and small shadow is shadow-sm
• All colors range from 50 to 950 where 50 is the lightest and 950 the darkest. So a very light blue is blue-50 and a very dark red is red-950
• So, you make your text dark red text-red-950

Tailwind CSS looks good

Starting out a new project with zero styles is daunting. Even if you're a designer, choosing all the colors and creating a typography scale is extremely time consuming.

Tailwind already has a solid foundation for font sizes and color steps in meaningful intervals so you can get to work instead of having to create all that from scratch.

Everyone is using Tailwind

Honestly one of the main reasons you should consider at least learning what Tailwind is that is incredibly popular.

Chances are you'll work with front-end devs who are already using it or would be happy to.