Tailwind CSS Introduction

What you'll learn

Understand the utility-first CSS approach vs traditional CSS

Apply responsive styles with breakpoint prefixes

Style elements using Tailwind's spacing, color, and typography system

Compose complex designs with Tailwind's built-in utilities

Customize the default theme via tailwind.config or CSS variables

Understand how Tailwind's JIT engine generates only what you use

Tailwind is a utility-first CSS framework that lets you build designs by composing small, single-purpose classes.

Core Concept

<!-- No custom CSS needed -->
<div class="flex items-center gap-4 rounded-lg border p-4 shadow-sm">
  <img class="h-12 w-12 rounded-full" src="avatar.jpg" alt="" />
  <div>
    <p class="text-sm font-medium text-gray-900">Alice</p>
    <p class="text-sm text-gray-500">alice@example.com</p>
  </div>
</div>

Why Utility-First?

No naming conventions (no .card-header-wrapper)
Small CSS bundles (purges unused classes)
Changes are predictable
Responsive design is built-in

Next Steps

Key Takeaways

Utility-first means composing designs from single-purpose classes rather than writing custom CSS

Responsive prefixes (sm:, md:, lg:, xl:) apply different styles at different breakpoints within the same class string

Tailwind's design system includes a consistent spacing scale, color palette, and typographic sizing

The JIT engine scans your source files and generates only the CSS classes you actually use, keeping output tiny

Since Tailwind v4, configuration is done through CSS (the @theme directive) instead of a JavaScript config file