laravel8 tailwind テーブルに中央配置

こちらの記事では、Laravelでtailwindを使ったテーブルを中央に配置する方法についてご紹介します！
非常に簡単に実装できるので是非参考にして頂ければと思います！

テーブル中央配置を実装

<div class="flex justify-center">
  <table>
  <thead class="">
    <tr>
      <th class="">期限</th>
      <th class="">商品</th>
      <th class="">数量</th>
  </thead>

  <tbody class="">
    @foreach ($stocks as $stock)
      <tr class ="">
        <td class="">
          {{$stock->deadline}}
        </td>

        <td class="">
          {{$stock->name}}
        </td>

        <td class="">
          {{$stock->number}}
        </td>
      </tr>
    @endforeach
  </tbody>
  </table>
</div>

tailwindの実装はdivタグ内のclassにflex justify-centerを実装するだけです。
あとは文字の大きさやテーブルの幅、背景色など、個別によって実装したいデザインがあるかと思うので、各タグのclassに記述していけばOKです！

今回実装したflex justify-centerについては下記のリンクからtailwind公式のサイトをご覧ください。
https://tailwindcss.com/docs/justify-content#class-reference