LaravelのBladeでTailwindCSSのクラス名を動的に変更できるようにしたらCSSが効かない

タイトルがかなり長くなってしまいましたが...

TailwindCSSのクラス名をBladeの変数で動的に出し分けしたときに、クラス名のCSSが効いてない！ということがあったので、解消方法をメモします。

結論からお話すると、tailwind.config.jsにsafelistとして該当のクラス名を追加するだけです。

tailwind.config.js

module.exports = {

    // 他の設定
    
    safelist: [
        'bg-red-500',
        'bg-yellow-500',
        'bg-gray-400',
    ],
}

bladeではcontrollerから$statusBgColorsという変数を渡してもらって、動的にクラス名が変わるようにしてます。
下記の{{$statusBgColors[$key]}}の部分です。

<td class="px-6 py-4 whitespace-nowrap text-center">
    <div class="text-sm text-gray-50 max-w-full w-20 py-1 {{$statusBgColors[$key]}}">
        {{ config('constants.billingStatus')[$invoice->status] }}
    </div>
</td>

これで無事に表示されるようになりました。