tailwind1-3  Exercise 2: Border, Radius, Shadow and Ring
========================================================

Step 1: the card with a border but no colour class.

  <div id="card0" class="border p-4 rounded-xl shadow-md text-gray-900">Card</div>

Step 2: the fix, a colour for the border.

  <div id="card1" class="border border-gray-200 p-4 rounded-xl shadow-md text-gray-900">Card</div>

Step 3: the selected state, a 2px blue ring added to the same classes.

  <div id="card2" class="border border-gray-200 p-4 rounded-xl shadow-md text-gray-900 ring-2 ring-blue-500">Card</div>

Read the computed values in DevTools (Elements > Computed) or with:

  for (const id of ['card0', 'card1', 'card2']) {
    const cs = getComputedStyle(document.getElementById(id));
    console.log(id, cs.borderTopColor, '| text', cs.color, '| radius', cs.borderTopLeftRadius, '| shadow', cs.boxShadow);
  }

Output (measured in headless Chrome):

  card0 oklch(0.21 0.034 264.665) | text oklch(0.21 0.034 264.665) | radius 12px | shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px
  card1 oklch(0.928 0.006 264.531) | text oklch(0.21 0.034 264.665) | radius 12px | shadow (the same four empty layers and the same two shadow layers)
  card2 oklch(0.928 0.006 264.531) | text oklch(0.21 0.034 264.665) | radius 12px | shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklch(0.623 0.214 259.815) 0px 0px 0px 2px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px

WHY THIS WORKS AS AN ANSWER
---------------------------
card0: the border colour is identical to the text colour (oklch(0.21 0.034 264.665), which is gray-900). In Tailwind v4 the default border colour is
currentcolor, so a border with no colour class is as dark as the text. That is the line most likely to surprise you when you copy older code. card1 adds
border-gray-200 and the border becomes the light grey oklch(0.928 0.006 264.531).
rounded-xl is the radius variable --radius-xl, 0.75rem, which the browser reports as 12px.
card2: the shadow list is the same length as before. The fourth slot, empty in cards 0 and 1, now holds the blue 2px ring (oklch(0.623 0.214 259.815) with a 2px
spread), and the last two entries are still the medium shadow. A ring and a shadow do not compete because shadow-md and ring-2 write into different variables
(--tw-shadow and --tw-ring-shadow), and the one box-shadow property reads them all. The ring also takes no space, so the card does not move when it is selected,
unlike changing the border from 1px to 2px, which changes the card's inner size by a pixel on each side.