html - --css tailwind フラグで生成された Rails 7 プロジェクトで tailwindcss グリッドを動作させることができません

Question

そこで、Tailwindcss と Postgres を使用して、まったく新しい Rails 7 プロジェクトを生成しました。

rails new project -d postgresql --css tailwind

次に、見栄えの良い css を生成するタスク モデルを足場にしました。次に、scaffold html/css が垂直方向に引き出したので、インデックス ページを少し調整することにしました。個々のタスクが個々の行を形成する、より水平なレイアウトを目指しています。

Tailwind のドキュメントによると、各タスクにグリッドを使用できます。タスクに 3 つの属性があるため、3 列のグリッドを使用したいと考えました。

だから私grid gap-4 grid-cols-3は _task.html.haml に追加しました

.grid.gap-4.grid-cols-3{:id => "#{dom_id task}"}
  .my-5
    %strong.block.font-medium.mb-1 Description:
    = task.description
  .my-5
    %strong.block.font-medium.mb-1 Notes:
    = task.notes
  .my-5
    %strong.block.font-medium.mb-1 Deadline:
    = task.deadline
  - if action_name != "show"
    = link_to "Show this task", task, class: "rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium"
    = link_to 'Edit this task', edit_task_path(task), class: "rounded-lg py-3 ml-2 px-5 bg-gray-100 inline-block font-medium"
    %hr.mt-6

ただし、属性を互いに下にレンダリングし続けます。

それをいじって、スタイルが反映されない理由を突き止めようとした後、codepen.io で html/css を複製しました。

<main class="container mx-auto mt-28 px-5 flex">
  <div class="w-full">
    <div class="flex justify-between items-center">
      <h1 class="font-bold text-4xl">Tasks</h1>
      <a class="rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium" href="/tasks/new">New task</a>
    </div>
    <div class="min-w-full">
      <div class="grid gap-4 grid-cols-3" id="Task_1">
        <div class="my-5">
          <strong class="block font-medium.mb-1">Description:</strong>
          complete page 2 in math exercise book
        </div>
        <div class="my-5">
          <strong class="block font-medium.mb-1">Notes:</strong>
          try also the advanced exercises, but don't spend more than 10 minutes on them
        </div>
        <div class="my-5">
          <strong class="block font-medium.mb-1">Deadline:</strong>
          My Deadline
        </div>
      </div>  
      <div class="grid gap-4 grid-cols-3" id="Task_2">
        <div class="my-5">
          <strong class="block font-medium.mb-1">Description:</strong>
          Description
        </div>
        <div class="my-5">
          <strong class="block font-medium.mb-1">Notes:</strong>
          Some flippin' notes
        </div>
        <div class="my-5">
          <strong class="block font-medium.mb-1">Deadline:</strong>
          My Deadline
        </div>
      </div>  
    </div>
  </div>
</main>

そこでは、意図したとおりに完全にレンダリングされました。

私は何が欠けていますか？どんな助けでも感謝します。