Tailwind CSS で動的に組み立てたクラス名が反映されない

// NG: スキャンで検出されない
<div className={`bg-${color}-500`}>...</div>
 
// OK: 完全文字列を map に並べる
const bgMap = {
  red: "bg-red-500",
  blue: "bg-blue-500",
} as const;
<div className={bgMap[color]}>...</div>

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{ts,tsx}"],
  safelist: [
    "bg-red-500",
    "bg-blue-500",
    { pattern: /bg-(red|blue|green)-(100|500|900)/ },
  ],
};

<div
  style={{ "--brand": color } as React.CSSProperties}
  className="bg-[var(--brand)]"
>
  ...
</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 75ms.

$ grep -c "bg-red-500" out.css
0
0 = 完全文字列 bg-red-500 がソースに存在しないため出力されない

$ 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 97ms.

$ grep -A2 "\.bg-red-500" out.css
.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1))

$ 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 149ms.

$ grep -c "bg-green-900" out.css
22
1 以上 = safelist の pattern でまとめて出力されている