Tailwind CSS の任意値 (arbitrary value) が反映されない

// NG: スキャンで検出されない
<div className={`w-[${width}px]`}>...</div>
 
// OK
const widthClass = width === "narrow" ? "w-[120px]" : "w-[240px]";
<div className={widthClass}>...</div>

<div class="grid-cols-[1fr_2fr_minmax(0,3fr)]">...</div>
<div class="bg-[url('/hero_bg.png')]">...</div>

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{ts,tsx}",
    "./src/**/*.mdx",
    "./node_modules/@my-org/ui/dist/**/*.js",
  ],
};

<div
  style={{ "--w": `${width}px` } as React.CSSProperties}
  className="w-[var(--w)]"
>
  ...
</div>

$ npx tailwindcss -i src/input.css -o out.css
Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
 
Rebuilding...
 
warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration
 
Done in 83ms.

$ grep -c 123px out.css
0

$ grep -c 1fr out.css
0
どちらも 0 = 完全文字列として出現していないため JIT が検出できていない

$ npx tailwindcss -i src/input.css -o out.css
Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
 
Rebuilding...
 
Done in 83ms.

$ grep -A2 -F .w-\[123px\] out.css
.w-\[123px\] {
  width: 123px;
}

$ grep -A2 -F .grid-cols-\[1fr_2fr\] out.css
.grid-cols-\[1fr_2fr\] {
  grid-template-columns: 1fr 2fr;
}
_ は出力時にスペースへ戻る