所以我用 Tailwindcss 和 Postgres 生成了一个全新的 Rails 7 项目
rails new project -d postgresql --css tailwind
然后我搭建了一个任务模型，它生成了漂亮的 CSS。然后我冒险对索引页面进行了一些调整，因为脚手架 html/css 将其垂直拉出。我正在努力实现更水平的布局，其中各个任务将形成单独的行。
根据顺风文档，我可以为每个任务使用一个网格。因为我在一个任务中有三个属性，所以我想使用一个三列网格。
所以我添加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>
正如我所期望的那样，它在那里完美呈现。
我错过了什么？任何帮助表示赞赏。