Introduction to Tailwind CSS

Tailwind CSS is a utility-first CSS framework that lets you build modern websites without writing custom CSS. Instead of creating classes like .card or .button, you compose designs using small utility classes directly in your HTML.

Traditional CSS vs Tailwind

Let's build a simple card both ways:

Traditional CSS Approach

<div class="card">
  <h2 class="card-title">Hello World</h2>
  <p class="card-text">This is a card component.</p>
</div>

.card {
  background: white;
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.card-text {
  color: #6b7280;
}

Tailwind Approach

<div class="bg-white p-6 rounded-lg shadow-md">
  <h2 class="text-xl font-semibold mb-2">Hello World</h2>
  <p class="text-gray-500">This is a card component.</p>
</div>

No CSS file needed! Everything is right there in the HTML.

Why Developers Love Tailwind

1. No More Naming Things

With traditional CSS, you spend time inventing class names like .card-wrapper, .card-inner, .card-title-large. With Tailwind, you just describe what you want:

<!-- What does this do? You have to check the CSS -->
<div class="sidebar-nav-item-active">...</div>

<!-- Instantly readable! -->
<div class="bg-blue-100 text-blue-800 px-4 py-2 rounded">...</div>

2. Changes Are Local

In traditional CSS, changing .button affects every button everywhere. In Tailwind, changing bg-blue-500 to bg-green-500 only affects that one element.

3. Your CSS Stops Growing

Traditional CSS files grow forever. With Tailwind, you reuse the same utilities - your production CSS stays tiny (~10KB gzipped).

See The Difference

Here's a notification component:

<div class="flex items-center gap-3 bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg">
  <svg class="w-5 h-5">...</svg>
  <span class="font-medium">Successfully saved!</span>
</div>

Every class is self-documenting:

• flex items-center gap-3 - Flexbox, vertically centered, 12px gap
• bg-green-50 - Light green background
• border border-green-200 - Green border
• text-green-800 - Dark green text
• px-4 py-3 - Horizontal padding 16px, vertical 12px
• rounded-lg - Large border radius

Key Takeaways

• Tailwind uses utility classes instead of custom CSS
• Classes are composable - combine them to build any design
• No context switching between HTML and CSS files
• Production CSS is tiny because utilities are reused

Next, we'll set up Tailwind in a real project!