tailwind1-10  Exercise 1: Off-Scale Values and Variables
=========================================================

page.html:

  <div style="width:600px">
    <div id="a" class="w-[calc(100%-2rem)] h-4 bg-gray-300"></div>
  </div>

  <div id="b" class="w-(--w) h-4 bg-gray-300" style="--w: 200px"></div>

  <div id="c" class="text-(length:--sz)" style="--sz: 30px">size</div>

  <div id="d" class="text-(color:--clr)" style="--clr: rgb(255, 0, 0)">colour</div>

Measured in Chrome:

  #a width      568px              (600px parent minus 2rem = 32px)
  #b width      200px
  #c font-size  30px
  #d color      rgb(255, 0, 0)

What an unhinted class generates (compiled output):

  text-(--v)           color: var(--v)
  text-[var(--v2)]     color: var(--v2)
  text-(length:--sz)   font-size: var(--sz)
  text-(color:--clr)   color: var(--clr)

WHY THIS WORKS AS AN ANSWER
---------------------------
The calc() class works because Tailwind adds the spaces CSS requires around + and -, so you can write the bracket without any. The class w-(--w) is shorthand for w-[var(--w)], and the
value comes from the inline style at run time, which is how you handle a number that is only known in the browser (a class name cannot be assembled from a variable, because Tailwind
reads your files as plain text). The text- prefix is shared by font size and colour, and a bare variable gives Tailwind nothing to tell them apart, so it generates colour. A variable that
holds a size therefore needs the hint, text-(length:--sz), which produced font-size and measured 30px.