tailwind2-2  Exercise 2: Why @theme inline
===========================================

Same setup as exercise 1 (Tailwind installed, Chrome path, page() helper).

--- a.css (plain @theme) ---
@import "tailwindcss" source(none);
@source "./tpl.html";
:root { --brand: #2563eb; }
[data-theme="ocean"] { --brand: #0d9488; }
@theme {
  --color-primary: var(--brand);
}

--- b.css (the same, but @theme inline) ---
@import "tailwindcss" source(none);
@source "./tpl.html";
:root { --brand: #2563eb; }
[data-theme="ocean"] { --brand: #0d9488; }
@theme inline {
  --color-primary: var(--brand);
}

--- tpl.html ---
<!doctype html><meta charset=utf-8><link rel=stylesheet href=OUT>
<div id="x" class="bg-primary p-2">root</div>
<section data-theme="ocean"><div id="y" class="bg-primary p-2">inside ocean</div></section>
<pre id="res"></pre>
<script>
const g = i => getComputedStyle(document.getElementById(i)).backgroundColor;
document.getElementById('res').textContent = 'root: ' + g('x') + '\ninside data-theme=ocean: ' + g('y');
</script>

--- build and read ---
# Chrome path used below; change it for your machine
CH="/c/Program Files/Google/Chrome/Application/chrome.exe"
# print the text of <pre id="res"> from a page
page() { "$CH" --headless=new --disable-gpu --dump-dom "file:///$1" | sed -n '/<pre id="res">/,/<\/pre>/p' | sed 's/<pre id="res">//; s/<\/pre>//'; }
npx @tailwindcss/cli -i a.css -o a.out.css ; sed "s/OUT/a.out.css/" tpl.html > a.html ; page "C:/path/to/your/folder/a.html" ; grep -n "color-primary\|var(--brand)" a.out.css
npx @tailwindcss/cli -i b.css -o b.out.css ; sed "s/OUT/b.out.css/" tpl.html > b.html ; page "C:/path/to/your/folder/b.html" ; grep -n "color-primary\|var(--brand)" b.out.css

Output (a.css first, then b.css):

--- a ---
root: rgb(37, 99, 235)
inside data-theme=ocean: rgb(37, 99, 235)
13:    --color-primary: var(--brand);
166:    background-color: var(--color-primary);

--- b ---
root: rgb(37, 99, 235)
inside data-theme=ocean: rgb(13, 148, 136)
165:    background-color: var(--brand);

WHY THIS WORKS AS AN ANSWER
---------------------------
With plain @theme, Tailwind writes --color-primary: var(--brand) once, on :root, and the utility reads var(--color-primary). A custom property that contains var() is resolved where it is declared,
so --color-primary becomes the blue from :root and every descendant inherits that already-resolved colour. Redefining --brand inside [data-theme="ocean"] changes --brand there, but nothing re-reads it,
so the box inside the ocean section stays blue (rgb(37, 99, 235)) in the first case. With @theme inline, Tailwind does not create --color-primary at all; the utility's rule says
background-color: var(--brand) directly, so the variable is read at the element and the nearest definition wins: teal (rgb(13, 148, 136)) inside the section. The cost of inline is that
--color-primary no longer exists for your own CSS or JavaScript to read, so use var(--brand) there. Use plain @theme for fixed tokens and @theme inline for tokens that point at variables
that change per scope.