What is Tailwind CSS?

Tailwind CSS is a utility-first framework. Instead of writing custom CSS classes, you compose small, single-purpose classes directly in your HTML.

The Idea

Traditional CSS:

.card {
  padding: 1rem;
  border-radius: 0.5rem;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

<div class="card">Hello</div>

Tailwind:

<div class="p-4 rounded-lg bg-white shadow">Hello</div>

Each class does one thing: p-4 is padding, rounded-lg is a border radius, shadow is a shadow.

Why Utility-First?

• No naming — You never invent .card-header-inner again.
• No dead CSS — Classes you do not use are not generated.
• Consistent scale — Spacing, colors, and sizes come from one design system.
• Local reasoning — The styles are right there in the markup.

A Real Component

<button
  class="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400"
>
  Save
</button>

Hover, focus, color, spacing — all visible at a glance.

Does It Get Verbose?

It can, for complex elements. Tailwind gives you tools for that:

• Components — Extract repeated markup into a component.
• @apply — Compose utilities into a named class when needed.
• clsx / cva — Build conditional class strings cleanly.

Verbosity in markup usually beats a tangle of overlapping stylesheets.

Tailwind vs Plain CSS

Best Practices

1. Think in utilities — Compose, do not fight it.
2. Extract components, not classes — Reuse markup, not stringly-typed CSS.
3. Stay on the scale — p-4, not arbitrary p-[13px] without reason.
4. Use the docs — The class search is the fastest way to learn.

Common Mistakes

1. Treating utilities as inline styles — They are a design system, not free-form CSS.
2. Overusing arbitrary values — w-[137px] everywhere defeats consistency.
3. Copy-pasting long class lists — Extract a component.
4. Skipping hover/focus states — They are built in; use them.