tailwind1-1  Exercise 3: What Preflight Did to Your Page
========================================================

# page.html: no classes at all
cat > page.html <<'HTML'
<h1>Title</h1>
<ul>
  <li>One</li>
  <li>Two</li>
</ul>
<img src="photo.jpg" alt="A photo">
HTML

echo '@import "tailwindcss";' > input.css
npx @tailwindcss/cli -i input.css -o out.css

# the three Preflight rules
grep -A3 "h1, h2" out.css
echo ---
grep -A2 "ol, ul, menu" out.css
echo ---
grep -A7 "img, svg, video" out.css

Output:

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
---
  ol, ul, menu {
    list-style: none;
  }
---
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }

# Now give the list back its bullets and indent
sed -i 's/<ul>/<ul class="list-disc pl-5">/' page.html     # on macOS: sed -i '' ...
npx @tailwindcss/cli -i input.css -o out.css
sed -n '/^@layer utilities {/,/^}/p' out.css

Output:

@layer utilities {
  .list-disc {
    list-style-type: disc;
  }
  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }
}

WHY THIS WORKS AS AN ANSWER
---------------------------
The page has no classes, yet the output is not empty: the base layer (Preflight) is always there. Its rules say that headings inherit their size and weight from the
parent (so the h1 looks like body text), lists have no bullet (list-style: none, and padding is already zero from the reset at the top of the layer), and images are
blocks that never grow wider than their container (display: block; max-width: 100%).
To undo a reset you add a utility that says the opposite. list-disc puts the bullets back and pl-5 (five steps of the spacing scale, 1.25rem) pushes the list
inward so the bullets are not outside the text. The utilities layer now contains exactly those two rules. The other two Preflight rules still apply, which is the
point: you ask for what you want, and nothing else comes along.
Note: the utilities layer was empty before (the build wrote "@layer utilities;" with nothing in it); only these two classes put anything there.