Tailwind CSS is a utility-first CSS framework .

It gives us ready-made utility classes like:

flex

text-center

p-4

rotate-90

We use these classes directly inside HTML or JSX to build designs quickly.

Instead of writing custom CSS again and again, Tailwind already provides hundreds of small reusable classes.

What does “Utility-First” mean?

A utility class does one small job only .

Example:

w-12 → sets width

h-12 → sets height

text-center → centers text

flex → makes flexbox layout

We combine many small classes together to create complete layouts and designs.

Easy Way to Remember

Think like this:

Normal CSS

You write your own CSS:

.box { width : 48px ; height : 48px ; display : flex ; }

Enter fullscreen mode

Exit fullscreen mode

Tailwind CSS

You use ready-made classes:

<div class= "w-12 h-12 flex" ></div>

Enter fullscreen mode

Exit fullscreen mode

So Tailwind means:

“Don’t write CSS from scratch.…