tailwind1-9  Exercise 2: Two Themes, and the One Word That Makes Them Work
==========================================================================

Version A: a plain @theme.

  @import "tailwindcss";
  @theme { --color-primary: var(--brand); }

  :root { --brand: oklch(0.62 0.21 260); }              /* blue */
  [data-theme=green] { --brand: oklch(0.72 0.22 150); } /* green */

  <div id="outer" class="bg-primary h-6"></div>
  <div data-theme="green"><div id="inner" class="bg-primary h-6"></div></div>

The compiled rule for the class:

  .bg-primary { background-color: var(--color-primary); }

Version B: the same, but with inline.

  @theme inline { --color-primary: var(--brand); }

The compiled rule for the class:

  .bg-primary { background-color: var(--brand); }

Read the background of both boxes in each version (console, or DevTools > Computed):

  getComputedStyle(document.getElementById('outer')).backgroundColor
  getComputedStyle(document.getElementById('inner')).backgroundColor

Measured in headless Chrome:

                       outer                    inner (inside data-theme="green")
  A: plain @theme      oklch(0.62 0.21 260)     oklch(0.62 0.21 260)    BLUE, the theme did not apply
  B: @theme inline     oklch(0.62 0.21 260)     oklch(0.72 0.22 150)    GREEN

WHY THIS WORKS AS AN ANSWER
---------------------------
In version A the class reads var(--color-primary), and --color-primary is declared once, on :root, as var(--brand). A custom property that refers to another is resolved on the element that declares it, so on :root it
becomes the blue value, and descendants inherit that finished blue. The data-theme="green" rule changes --brand for the island, but --color-primary was already worked out at the top, so nothing downstream changes: the
inner box stays blue.
In version B, inline tells Tailwind to put the referenced value straight into the utility. The class is background-color: var(--brand), and --brand IS looked up on each element, so the island's green wins there.
Use @theme inline whenever a theme value points at a variable that changes by context: a theme attribute like this one, a dark-mode override, or a font variable from a framework. (Theming a design system this way is
developed in Tailwind CSS Intermediate/Advanced 2.)