Lesson 1 of 8

The Utility-First Approach

With plain you name a and then write rules for it. With Tailwind each class applies one style, such as `p-4` for `padding: 1rem`. You'll see how that changes the way you style a page.

Tailwind classes are atomic utilities — each does exactly one thing. You compose them directly in your to build any design. It can feel unfamiliar at first, but most people find it a fast way to work once they are used to it.

<!-- 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>
Sandboxed page
Finished reading?Mark it done to track your progress.

Tip: use the ← and → keys to move between lessons.