1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Posted at

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

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>

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?