Why Tailwind CSS

Tailwind gives you a lot of small classes. Each one applies a single CSS decision.

Here is a notification card built with a handful of them:

<article class="max-w-sm rounded-lg border border-gray-200 p-6">
  <h2 class="text-lg font-semibold text-gray-950">Deploy complete</h2>
  <p class="mt-2 text-sm leading-6 text-gray-600">
    The new version is live.
  </p>
</article>

Read the classes one by one. max-w-sm is a maximum width. border and border-gray-200 are a border. p-6 is padding. On the heading, text-lg is a font size, font-semibold is a weight, text-gray-950 is a color. Nothing magic is happening. Tailwind scans your files, finds the classes you used, and generates plain CSS for them. The browser receives ordinary CSS rules.

Where composition happens

The real change is where you compose styles. In classic CSS you invent a name like .notification-card, jump to a stylesheet, write the rules, then jump back to the markup. With Tailwind you compose the visual rules right where the element lives.

I like this for two reasons. Dependencies are visible: I can see what an element does without searching another file. And deleting is safe: when I remove the element, its styles go away with it. No orphan CSS left behind.

A shared theme

Tailwind also constrains your choices through a shared theme. p-6, text-sm, and rounded-lg come from a fixed scale. Ten components using p-6 look consistent. Ten components each picking their own padding do not.

Responsive and state variants live in the same place too:

<button class="bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 md:px-6">
  Continue
</button>

The hover color and the wider padding on medium screens sit right next to the base styles. You don’t have to hunt for a media query somewhere else.

The costs

There are downsides. Class lists get dense. Repeated patterns need to be extracted into components, or you end up copying the same twenty classes around. And knowing a class name is not the same as understanding CSS. Tailwind won’t teach you layout, the cascade, or accessibility. You still need those.

My advice is to not learn Tailwind as a catalog to memorize. Start from the CSS decision: “this parent should be a grid”, “this text needs a looser line height”. Then find the utility that says it. When you’re unsure what a class does, open DevTools. The generated declaration is right there.

Try this on your own: build a small alert with six utilities. Next to each class, write the CSS property it controls. Then remove one class at a time and check the Computed panel to see if your prediction was right.