tailwind1-2  Exercise 2: A Typographic Ladder
=============================================

The spec and the class for each part:

  eyebrow: 12px, uppercase, weight 600, letter-spacing 0.1em  -> text-xs font-semibold uppercase tracking-widest
  title:   36px, bold, line height 1.25, tracking -0.025em, balanced lines -> text-4xl font-bold tracking-tight leading-tight text-balance
  lede:    18px on a 28px line                                 -> text-lg   (or text-lg/7, see the last question)
  body:    16px on a 26px line                                 -> text-base leading-relaxed
  all blocks no wider than 65 characters                       -> max-w-prose on the header

<header id="art" class="max-w-prose">
  <p id="eyebrow" class="text-xs font-semibold uppercase tracking-widest">Release notes</p>
  <h1 id="title" class="text-4xl font-bold tracking-tight leading-tight text-balance">Version 4.3 adds scrollbar utilities and more</h1>
  <p id="lede" class="text-lg/7">A short introduction that says why the article is worth reading.</p>
  <p id="body" class="text-base leading-relaxed">Body copy sits at the default size with a looser line height so long paragraphs stay easy to read across several lines of text.</p>
</header>

Check each value in DevTools > Elements > Computed, or in the console:

  ['eyebrow', 'title', 'lede', 'body'].forEach(id => {
    const c = getComputedStyle(document.getElementById(id));
    console.log(id, c.fontSize, c.lineHeight, c.fontWeight, c.letterSpacing, c.textTransform, c.textWrap);
  });

Output (measured in headless Chrome; the page used the default system sans-serif font):

  eyebrow 12px 16px 600 1.2px uppercase wrap
  title 36px 45px 700 -0.9px none balance
  lede 18px 28px 400 normal none wrap
  body 16px 26px 400 normal none wrap
  (every block is 561px wide: 65ch in this font)

WHY THIS WORKS AS AN ANSWER
---------------------------
eyebrow: tracking-widest is 0.1em, and 0.1 x 12px is the 1.2px reported. text-xs brings its own 16px line height.
title: text-4xl alone would give a 40px line (its default). leading-tight replaces it with 1.25 x 36px = 45px, and the order of the classes does not matter,
because the size class reads the line height from a variable (--tw-leading) that the leading class sets. tracking-tight is -0.025em, so -0.9px at 36px.
text-balance sets text-wrap: balance (the last value on the title line).
body: leading-relaxed is 1.625, and 1.625 x 16px = 26px.
max-w-prose is max-width: 65ch. A "ch" is the width of the digit 0 in the element's font, so the pixel width depends on the font: 561px here, a different
number with another font.

The last question: the lede is already 28px with plain text-lg, because the type scale pairs 18px with a 28px line. Swapping text-lg for text-lg/7 gives
the same 28px but a different source: the line height is then calc(var(--spacing) * 7), seven steps of the spacing scale. The difference shows up only when
something changes: if the theme's --spacing changes, text-lg/7 moves with it and plain text-lg does not; and if you want a different line height, a slash class
keeps size and line height together in one class instead of needing a leading-* class beside it.