tailwind1-7  Exercise 3: Reading Classes at Different Widths
============================================================

<p id="a" class="text-sm md:text-base lg:text-lg">a</p>
<p id="b" class="hidden sm:block md:hidden">b</p>
<p id="c" class="p-2 sm:p-4 max-sm:p-1">c</p>
<p id="d" class="text-red-500 md:max-lg:text-blue-500">d</p>

Predictions are easy once you apply two rules: an unprefixed class applies at every width, and a prefixed class applies from its breakpoint up (sm 640, md 768, lg 1024). Later (wider) rules
override earlier ones; max-* and ranges add a ceiling.

Measured in headless Chrome at each viewport width:

  width   (a) font size   (b) display   (c) padding   (d) colour
  360     14px            none          4px           red-500
  640     14px            block         16px          red-500
  768     16px            none          16px          blue-500
  1024    18px            none          16px          red-500

WHY EACH RESULT IS WHAT IT IS
-----------------------------
(a) text-sm is the base (14px); md:text-base (16px) takes over at 768 and lg:text-lg (18px) at 1024. At 640 only the base applies, because nothing is defined for sm. Each size lasts until the next
    breakpoint class.
(b) hidden is display: none for all widths; sm:block turns it on from 640 up, and md:hidden turns it off again from 768 up. So the element is visible only in the band 640 to 767. This is the
    pattern for "show only on tablets", and the order of the three classes in the attribute does not matter (the generated CSS is ordered by breakpoint).
(c) p-2 is the base (8px). sm:p-4 sets 16px from 640 up. max-sm:p-1 sets 4px below 640 only (width < 40rem), so at 360 it beats p-2 and gives 4px, while at 640 it no longer matches (max-* is strictly
    below the width) and sm:p-4 gives 16px. Note that max-sm:p-1 would be redundant if you wrote the phone layout as the base: p-1 sm:p-4 says the same thing more simply.
(d) text-red-500 is the base. md:max-lg:text-blue-500 applies from 768 AND below 1024, so it is blue at 768 and red again at 1024 (the range stops just before 1024). That is the surprise: a
    colour that comes back to the base once the range ends.
The surprise to remember is (b) and (d): a class that switches something on at one breakpoint stays on forever unless a later breakpoint (md:hidden) or a ceiling (max-lg:) switches it off.