tailwind2-1  Exercise 3: Old CSS and Cascade Layers
===================================================

Run this in an empty folder that has Tailwind installed and Chrome in the path used below (edit the CH line and the file:// path for your machine). It is bash.

rm -rf lay && mkdir -p lay/src && cd lay
cat > src/legacy.css <<'EOF'
.btn { padding: 4px; background-color: gray; }
EOF
cat > src/index.html <<'EOF'
<!doctype html><meta charset="utf-8"><link rel="stylesheet" href="out.css">
<button id="b" class="btn p-8 bg-blue-600 text-white">Buy</button>
<pre id="res"></pre>
<script>
const s = getComputedStyle(document.getElementById('b'));
document.getElementById('res').textContent = 'padding ' + s.paddingTop + '  background ' + s.backgroundColor;
</script>
EOF
CH="/c/Program Files/Google/Chrome/Application/chrome.exe"
shot() { npx @tailwindcss/cli -i "$1" -o src/out.css >/dev/null 2>&1
  "$CH" --headless=new --disable-gpu --dump-dom "file:///C:/lwdj/tw2/ex/lay/src/index.html" 2>/dev/null | grep -o 'padding [0-9a-z]*  background [^<]*'; }
cat > a.css <<'EOF'
@import "tailwindcss" source(none);
@source "./src";
@import "./src/legacy.css";
EOF
echo "1) legacy imported unlayered:";  shot a.css
cat > b.css <<'EOF'
@import "tailwindcss" source(none);
@source "./src";
@import "./src/legacy.css" layer(components);
EOF
echo "2) legacy imported into the components layer:";  shot b.css
grep -n "^@layer" src/out.css

Output:

1) legacy imported unlayered:
padding 4px  background rgb(128, 128, 128)
2) legacy imported into the components layer:
padding 32px  background oklch(0.546 0.245 262.881)
2:@layer theme, base, components, utilities;
3:@layer theme {
17:@layer base {
165:@layer utilities {
176:@layer components {

WHY THIS WORKS AS AN ANSWER
---------------------------
Tailwind puts all of its utilities in @layer utilities. In step 1 the old stylesheet is imported with no layer, and CSS that is outside every layer beats CSS inside a layer, whatever the
specificity. So the legacy .btn rule wins over p-8 and bg-blue-600: the button is 4px padding on grey (rgb(128, 128, 128)). In step 2 the same file is imported with layer(components). Now
the legacy rule is inside a layer, and the layer order is theme, base, components, utilities, so utilities come later and win: the padding is 32px (p-8 is 2rem) and the background is blue-600.
The last line of the output shows the layer that the import created (@layer components wrapping the legacy rules). The fix touched one line and no selector, and nothing needed !important.