What is Tailwind CSS?

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;
}

---

Tailwind CSS

You use ready-made classes:

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

So Tailwind means:

“Don’t write CSS from scratch. Use small ready-made classes.”

---

One-Line Memory Trick

Tailwind CSS = Small ready-made classes combined together to build any design quickly.

---

How Tailwind Utility Classes Work

In Tailwind CSS, classes like:

w-12
h-12
flex
text-center

already have CSS written behind the scenes.

Example:

.w-12 {
  width: 3rem;
}

.h-12 {
  height: 3rem;
}

---

Important Part

If you use w-12 100 times in your project:

<div class="w-12"></div>
<button class="w-12"></button>
<section class="w-12"></section>

Tailwind does NOT create the CSS 100 times.

The CSS rule for .w-12 is written only once.

Then every element simply reuses that same class.

---

So What Is the Benefit?

Instead of writing this again and again:

.card {
  width: 3rem;
}

.button {
  width: 3rem;
}

.box {
  width: 3rem;
}

Tailwind gives one reusable utility:

.w-12 {
  width: 3rem;
}

and everything shares it.

---

Easy Understanding

Think of utility classes like LEGO pieces.

You do not create a new LEGO block every time.

You reuse the same block in many places.

Tailwind utilities work the same way.

---

Final Simple Definition

Utility-first CSS means using small reusable classes that already contain one CSS property, and reusing them everywhere instead of writing new CSS repeatedly.