반응형 타이포그래피와 간격

<!-- Hero headline: grows with screen size -->
<h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold leading-tight">
  Build Beautiful UIs
</h1>

<!-- Typography scale across breakpoints -->
<div class="space-y-6 p-6 max-w-4xl">
  <!-- Display heading: large jump from mobile to desktop -->
  <h1 class="text-3xl md:text-5xl lg:text-7xl font-black tracking-tight">
    Display Heading
  </h1>
  <!-- Section heading -->
  <h2 class="text-xl md:text-2xl lg:text-3xl font-bold">Section Heading</h2>
  <!-- Body copy -->
  <p class="text-sm md:text-base lg:text-lg text-gray-700 leading-relaxed max-w-prose">
    Body copy scales from small on mobile to base on tablet to large on desktop for comfortable reading at every size.
  </p>
  <!-- Caption / meta -->
  <p class="text-xs md:text-sm text-gray-500">Caption text</p>
</div>

<!-- Leading adapts with font size -->
<h1 class="text-3xl leading-snug md:text-5xl md:leading-tight lg:text-7xl lg:leading-none font-black">
  This Long Headline Wraps
</h1>

<p class="text-sm leading-normal md:text-base md:leading-relaxed lg:text-lg lg:leading-loose text-gray-600 max-w-prose mt-4">
  Paragraph text uses relaxed line-height for comfortable reading across all screen sizes.
</p>

<!-- Letter spacing tightens as font size grows -->
<h1 class="text-3xl tracking-normal md:text-5xl md:tracking-tight lg:text-7xl lg:tracking-tighter font-black">
  Brand Name
</h1>

<!-- Uppercase labels: wider tracking for legibility -->
<p class="text-xs md:text-sm font-semibold uppercase tracking-widest text-gray-500">
  CATEGORY LABEL
</p>

<!-- Center on mobile, left-align on desktop -->
<div class="flex flex-col md:flex-row gap-8 items-center p-8">
  <div class="md:w-1/2 text-center md:text-left">
    <p class="text-sm font-semibold uppercase tracking-widest text-blue-500 mb-2">New Release</p>
    <h2 class="text-3xl md:text-4xl font-bold mb-4">Tailwind CSS v4</h2>
    <p class="text-gray-600 max-w-prose md:max-w-none">
      The next generation of utility-first CSS.
    </p>
    <button class="mt-6 bg-blue-600 text-white px-6 py-3 rounded-lg">
      Read the Docs
    </button>
  </div>
  <div class="md:w-1/2">
    <div class="aspect-video bg-gradient-to-br from-blue-400 to-indigo-600 rounded-2xl"></div>
  </div>
</div>

<!-- Two-layer padding: outer section + inner container -->
<section class="bg-gray-50 py-10 px-4 sm:py-14 sm:px-6 lg:py-20 lg:px-8">
  <!-- Inner container constrains content width -->
  <div class="max-w-6xl mx-auto">
    <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-center mb-6 lg:mb-12">
      Our Services
    </h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="bg-white p-6 rounded-xl shadow-sm">Service 1</div>
      <div class="bg-white p-6 rounded-xl shadow-sm">Service 2</div>
      <div class="bg-white p-6 rounded-xl shadow-sm">Service 3</div>
    </div>
  </div>
</section>

<!-- Vertical spacing scales with screen width -->
<article class="max-w-prose mx-auto px-4 py-8">
  <div class="space-y-4 md:space-y-6 lg:space-y-8">
    <h1 class="text-2xl md:text-3xl font-bold">Article Title</h1>
    <p class="text-gray-700 leading-relaxed">
      First paragraph. The space between elements grows as the screen gets wider.
    </p>
    <h2 class="text-xl md:text-2xl font-semibold">Section Heading</h2>
    <p class="text-gray-700 leading-relaxed">
      Second section content with proportional vertical spacing.
    </p>
  </div>
</article>

<!-- max-w-prose for readable text at any viewport -->
<div class="px-4 py-8">
  <h1 class="text-3xl font-bold mb-4">Long Form Content</h1>
  <!-- Constrained to 65ch for reading comfort -->
  <div class="max-w-prose">
    <p class="text-gray-700 leading-relaxed mb-4">
      This paragraph is constrained to a comfortable reading width of 65 characters
      per line regardless of the viewport size. On mobile it wraps naturally.
      On desktop monitors it stays narrow and readable.
    </p>
    <p class="text-gray-700 leading-relaxed">
      Long form writing, documentation, and blog posts benefit enormously
      from this constraint. Wide text is one of the most common readability
      mistakes in web design.
    </p>
  </div>
</div>

<!-- Responsive font weight and style -->
<div class="space-y-2 p-4">
  <p class="font-medium md:font-bold text-xl">Company Name</p>
  <p class="text-sm font-light md:font-normal text-gray-600">
    Subheading text gets slightly heavier on larger screens
  </p>
  <!-- Label: thin on mobile, bold on desktop -->
  <span class="text-xs font-thin sm:font-medium uppercase tracking-widest text-blue-500">
    FEATURED
  </span>
</div>

<!-- Fluid heading using CSS clamp -->
<h1
  class="font-black tracking-tight leading-none"
  style="font-size: clamp(2rem, 6vw, 5rem)"
>
  Fluid Heading
</h1>

<!-- Same with Tailwind arbitrary value (JIT) -->
<p
  class="text-[clamp(0.875rem,2.5vw,1.125rem)] text-gray-700 leading-relaxed max-w-prose"
>
  Fluid body text scales from 14px at mobile widths to 18px at wide screens.
</p>

<article class="px-4 py-10 sm:px-6 sm:py-14 lg:py-20">
  <div class="max-w-3xl mx-auto">
    <!-- Label -->
    <p class="text-xs sm:text-sm font-semibold uppercase tracking-widest text-blue-500 mb-3">Tutorial</p>
    <!-- Headline -->
    <h1 class="text-3xl sm:text-4xl lg:text-5xl font-black leading-tight sm:leading-snug mb-4">
      Mastering Responsive Typography in Tailwind
    </h1>
    <!-- Subheadline -->
    <p class="text-lg sm:text-xl text-gray-600 leading-relaxed max-w-2xl mb-6">
      Learn how font sizes, spacing, and alignment adapt across breakpoints.
    </p>
    <!-- Meta -->
    <div class="flex items-center gap-4 text-sm text-gray-400">
      <span>June 21, 2024</span>
      <span>•</span>
      <span>5 min read</span>
    </div>
  </div>
</article>