tailwind1-2  Exercise 1: From a Design Spec to Classes
======================================================

The spec, converted with the rule "pixels divided by 4":

  320px wide                      -> w-80      (80 x 4px)
  24px padding                    -> p-6       (6 x 4px)
  32px gap below the card         -> mb-8      (8 x 4px)   a margin, because it is space OUTSIDE the card
  centred in its parent           -> mx-auto
  children stacked                -> flex flex-col
  12px between the children       -> gap-3     (3 x 4px)

<div id="card" class="w-80 p-6 mb-8 mx-auto flex flex-col gap-3">
  <h2 id="c1" class="text-xl font-semibold">Card title</h2>
  <p id="c2">First line of the card.</p>
  <p id="c3">Second line of the card.</p>
</div>

To confirm it, build the page and paste this into the browser console (or open DevTools > Elements > Computed, which shows the same values):

  const card = document.getElementById('card'), cs = getComputedStyle(card), r = card.getBoundingClientRect();
  const c1 = document.getElementById('c1').getBoundingClientRect();
  const c2 = document.getElementById('c2').getBoundingClientRect();
  const c3 = document.getElementById('c3').getBoundingClientRect();
  console.log({
    width: r.width,
    contentWidth: r.width - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight),
    padding: cs.paddingTop, marginBottom: cs.marginBottom, marginLeft: cs.marginLeft,
    gapTitleToFirst: c2.top - c1.bottom, gapFirstToSecond: c3.top - c2.bottom
  });

Output (measured in headless Chrome, in a page 900px wide):

  { width: 320, contentWidth: 272, padding: "24px", marginBottom: "32px", marginLeft: "290px",
    gapTitleToFirst: 12, gapFirstToSecond: 12 }

WHY THIS WORKS AS AN ANSWER
---------------------------
The card is 320px wide in total, not 320px plus padding: Preflight sets box-sizing: border-box, so w-80 already includes the 24px of padding on each side, which
leaves 272px for the content (320 - 24 - 24). If you wanted a 320px content area you would write w-[368px], but a design that says "the card is 320px wide"
almost always means the outer width, so the plain class is right.
mx-auto is margin-inline: auto. The page is 900px wide and the card 320px, so the remaining 580px is split evenly: 290px on each side, which is the marginLeft
reported. The 32px below the card is a margin because it is space outside the element; the 12px between the children is a gap because it belongs to the
container and applies between its children, with nothing added above the first or below the last.
Both measured gaps are 12px, so gap-3 acts between every pair of children.