TwTailwind CSS · Lesson 1 of 8

The Utility-First Approach

Traditional CSS: you write a class name, then write CSS for it. Tailwind: the class names ARE the CSS. `p-4` means `padding: 1rem`. `text-blue-500` means that specific blue. No naming, no context-switching, no files.

Tailwind classes are atomic utilities — each does exactly one thing. You compose them directly in your HTML to build any design. This feels weird for about two hours and then feels obviously correct.

HTML

<!-- Traditional CSS approach -->
<div class="card">
  <h2 class="card-title">Hello</h2>
  <p class="card-body">Some text here.</p>
</div>

<style>
.card { padding: 1.5rem; background: white; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.card-title { font-size: 1.25rem; font-weight: 700; color: #111; margin-bottom: 0.5rem; }
.card-body { color: #6b7280; line-height: 1.6; }
</style>

<!-- Tailwind approach — same result, no CSS file -->
<div class="p-6 bg-white rounded-lg shadow">
  <h2 class="text-xl font-bold text-gray-900 mb-2">Hello</h2>
  <p class="text-gray-500 leading-relaxed">Some text here.</p>
</div>

◆ Note
Tailwind's build process scans your HTML/JS files and includes only the CSS classes you actually use. The final CSS bundle is typically 5–15 KB, not the full framework. This is why you must configure the `content` paths in tailwind.config.js — Tailwind needs to find all your class names.