tailwind1-11  Exercise 1: Transitions, and the Width Trap
==========================================================

page.html:

  <button id="b1" class="bg-blue-500 text-white p-2 transition-colors duration-300 ease-out hover:bg-red-500">Save</button>

  <div id="w1" class="h-10 w-10 bg-blue-500 transition duration-1000 hover:w-40"></div>
  <div id="w2" class="h-10 w-10 bg-blue-500 transition-all duration-1000 hover:w-40"></div>
  <div id="w3" class="h-10 w-10 bg-blue-500 transition-[width] duration-1000 hover:w-40"></div>

(1) Computed style of #b1 and the colour sampled while hovering:

  transition-duration:         0.3s
  transition-timing-function:  cubic-bezier(0, 0, 0.2, 1)

  start         oklch(0.623 0.214 259.815)           (blue-500)
  after 100ms   oklab(0.63661 0.207186 0.0927007)    (neither blue nor red: it is mid-blend)
  after 600ms   oklch(0.637 0.237 25.331)            (red-500)

(2) Width of each box, hovering, read 300ms in and again at the end:

  #w1  transition             160px at 300ms, 160px at the end   (no animation)
  #w2  transition-all         124.5px at 300ms, 160px at the end (animated)
  #w3  transition-[width]     121.156px at 300ms, 160px at the end (animated)

(The mid values depend on exact timing and will differ slightly on your machine; what matters is that they lie between 40px and 160px.)

WHY THIS WORKS AS AN ANSWER
---------------------------
transition-colors sets the property list to the colour properties, duration-300 sets 0.3s and ease-out sets the curve, so the computed style shows exactly those values. A colour sampled between
the start and the end that is neither of them is the evidence that the browser is blending the two. Plain "transition" has a long property list, but width is not on it (it covers colours, opacity,
shadow, transforms, filters, display and a few others), so the width change was not transitioned and the box jumped straight to 160px. transition-all lists every property, and transition-[width]
lists just the one you want; both animate it. Prefer the narrow version: it says what moves and does not animate things you did not mean to.