Philosophy

Tailwind favors utility classes over custom CSS.

With custom CSS, you usually write your markup, use semantic class names, and then use CSS to style everything.

<p className="greeting">
  Welcome, friend.
</p>

p.greeting {
  font-weight: bold;
}

There can be some downsides to using custom CSS:

• Naming things
  You have to invent a class name for every component. Naming things is hard.
• Growing complexity
  Your CSS files grow with every new component you implement.
• Breaking things
  Making changes might break things you are not aware of.

A utility class, on the other hand, is a primitive styling decision. For example, the utility class font-bold makes your text bold.

<p className="font-bold">
  Welcome, friends!
</p>

You can reuse this font-bold utility class on every element that needs bold font. No need to define a new class with a semantic name.

Tailwind is essentially a huge collection of utility classes. It allows you to create UIs by composing these utility classes right in your HTML. This leads to some benefits:

• Reusability
  You can reuse utility classes as often as you want.
• Composing utility classes
  Your team speaks the same language of utility classes.
• Isolating styles
  Utility classes are local to your HTML; changing them doesn’t break anything else.

Tailwind is opinionated. It disagrees with the idea that HTML is only for content and CSS is only for styles.

It favors composition over duplication and reusability over separation of concerns.