tailwind2-4  Exercise 1: Named Groups and Peers
================================================

Setup: a folder with Tailwind installed (npm install tailwindcss @tailwindcss/cli). Save the two files below, then build and open the page in Chrome:
  npx @tailwindcss/cli -i ex1.css -o ex1.out.css
To read a value by hand, use the console, for example:  getComputedStyle(document.querySelector('#s_card')).color
(The results below were measured with a scripted Chrome that used real mouse and click events; the same values appear when you hover and click yourself.)

--- ex1.css ---
@import "tailwindcss" source(none);
@source "./ex1.html";

--- ex1.html ---
<!doctype html><meta charset=utf-8><link rel=stylesheet href=ex1.out.css>
<body class="m-0 text-sm">
<!-- A: named groups -->
<div id="card" class="group/card group p-6 w-80 bg-gray-100">
  <div id="cardonly" class="h-8 bg-gray-200">card only</div>
  <div id="item" class="group/item group mt-2 h-12 bg-gray-300">
    <span id="s_card" class="group-hover/card:text-red-500">card</span>
    <span id="s_item" class="group-hover/item:underline">item</span>
    <span id="s_plain" class="group-hover:italic">plain</span>
  </div>
</div>
<!-- B: peers -->
<div id="peers" class="mt-4">
  <p id="before" class="peer-focus/field:text-red-500">before</p>
  <input id="field" class="peer/field border">
  <p id="after" class="peer-focus/field:text-red-500">after</p>
</div>
</body>

Results (RED means the colour is red-500; normal means the default text colour):

A. nothing hovered        group-hover/card: colour normal | group-hover/item: underline none | group-hover: italic normal
A. hover card only        group-hover/card: colour RED | group-hover/item: underline none | group-hover: italic italic
A. hover the inner item   group-hover/card: colour RED | group-hover/item: underline underline | group-hover: italic italic
B. before focus:   before normal | after normal
B. field focused:  before normal | after RED

WHY THIS WORKS AS AN ANSWER
---------------------------
group/card and group/item give each ancestor its own name. group-hover/card:text-red-500 compiles to a selector that looks for an ancestor named card that is hovered, so it turns red whenever the pointer is
anywhere on the card, including the inner item. group-hover/item:underline looks for the ancestor named item, so it stays plain when only the card is hovered and underlines only when the pointer is
on the item. The unnamed group-hover:italic uses the selector for ANY ancestor with the class "group", and both the card and the item have that class, so it switched on as soon as the card was hovered:
exactly the surprise that named groups remove. The peer test shows the other limit: peer-focus/field works through the general-sibling combinator (~), which only looks at siblings that come AFTER the
peer in the markup. The paragraph after the input turns red when the input has focus; the paragraph before it never does. If you need the label first, put the input first in the HTML and
reorder visually with flex order or grid.