Tailwind CSSで動的にclassを作るとスタイルが適用されない

Tailwind CSSで動的にclassを作ろうとしてスタイルが適用されないということがあったのでメモ。
使用環境はAastro 5.16.0 / Tailwind CSS 4.1.17になります。

サンプルコード

まず色がうまく適用されなかった例です。
Tailwindのクラスを動的に作ろうとすると、スタイルが適用されませんでした。

---
import Layout from '../../layouts/Layout.astro';
const color = 'red';
const step = 700;
---

<Layout>
<div
  class={`
    text-green-400
    bg-${color}-${step}
  `}
>テスト</div>

<button id="button">クリック時に背景色が紫に変更</button>

<script>
const $button = document.querySelector('#button');
const color = 'purple';
const step = 400;
$button?.addEventListener('click', () => {
  $button.classList.add(`bg-${color}-${step}`);
});
</script>
</Layout>

classを動的に作成するデモページ

Tailwindではソース内をチェックして、実際に使用されているclassのみを抽出してCSSを作成しているようで、今回のように動的にclassを作成していると抽出対象にならないようです。
動的に作成するのではなく、Tailwindで用意されている正しいclass名で追加するようにすると、スタイルが適用されました。

---
import Layout from '../../layouts/Layout.astro';
const bgColor = 'bg-red-700';
---

<Layout>
<div
  class={`
    text-green-400
    ${bgColor}
  `}
>テスト</div>

<button id="button">クリック時に背景色が紫に変更</button>

<script>
const $button = document.querySelector('#button');
const bgColor = 'bg-purple-400';
$button?.addEventListener('click', () => {
  $button.classList.add(bgColor);
});
</script>
</Layout>

正しいclassを使った場合のデモページ

もしくは、classをセーフリストに登録するという方法もあるようです。
今回はAstroを使用しているので、src/styles/global.css 内に以下を追記します。

@import "tailwindcss";

@source inline("bg-red-700");
@source inline("bg-purple-400");

これでソース内にbg-red-700やbg-purple-400のclassがなくても、CSSに出力されるようになりました。
セーフリストに追加するデモページ