Responsive Typography and Spacing

Responsive typography in Tailwind means adding breakpoint prefixes to text and spacing utilities. Start with the smallest readable size, scale up for larger screens.

Responsive headings

<h1 class="text-3xl sm:text-4xl lg:text-6xl font-bold leading-tight lg:leading-none">
  Ship faster with Tailwind
</h1>

<p class="text-base md:text-lg text-gray-600 mt-4 max-w-prose">
  Body copy that scales gracefully.
</p>

Responsive section padding

<section class="px-4 sm:px-6 lg:px-12 py-10 sm:py-16 lg:py-24">
  <div class="max-w-7xl mx-auto">
    Content
  </div>
</section>

Responsive card spacing

<div class="p-4 sm:p-6 lg:p-8 rounded-lg bg-white shadow">
  <h3 class="text-lg sm:text-xl font-semibold">Card title</h3>
  <p class="text-sm sm:text-base text-gray-500 mt-2">Card body</p>
</div>

The most common mistake: setting a large font size in the base class and trying to reduce it with breakpoint classes. Tailwind is mobile-first — breakpoint prefixes only add styles for larger screens, they do not reduce from smaller ones.