html - 无法让 tailwindcss 网格在使用 --css tailwind 标志生成的 Rails 7 元素中工作

Question

所以我用 Tailwindcss 和 Postgres 生成了一个全新的 Rails 7 元素

rails new project -d postgresql --css tailwind

然后我构建了一个任务模型，它生成了漂亮的 CSS。然后我尝试稍微调整一下索引页面，因为脚手架 html/css 将它垂直绘制出来。我正在努力实现更水平的布局，其中各个任务将形成单独的行。

根据 tailwind 文档，我可以为每个任务使用一个网格。因为我在一个任务中有三个属性，所以我想使用三列网格。

所以我将 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>

它完美呈现，正如我预期的那样。

我错过了什么？任何帮助表示赞赏。

Answer 1

解决方案通常非常简单:rtfm!

感谢 Akhil，他是 blogpost帮助我识别了 tailwindcss-rails gem --css tailwind 的魔力背后。

使用 tailwind，您必须在开发中运行一个单独的 watch 进程，您可以使用 rails tailwindcss:watch 作为单独的进程启动它，也可以通过运行 ./bin/dev 使用 foreman在开发模式下启动 Tailwind 监视进程和 Rails 服务器。