title: Can't get tailwindcss grid to work in a Rails 7 project generated with --css tailwind flag
body: <p>So I generated a brand new Rails 7 project with Tailwindcss and Postgres</p>
  <pre><code>rails new project -d postgresql --css tailwind
  </code></pre>
  <p>then I scaffolded a task model, which generated great looking css. Then I ventured to adapt the index page a bit, as the scaffold html/css drew it out vertically. I'm striving for a more horizontal layout, where individual tasks would form individual rows.</p>
  <p>According to tailwind documentation I could use a grid for each task. As I have three attributes in a task I wanted to use a three column grid.</p>
  <p>So I added <code>grid gap-4 grid-cols-3</code> to my _task.html.haml</p>
  <pre><code>.grid.gap-4.grid-cols-3{:id =&gt; &quot;#{dom_id task}&quot;}
    .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 != &quot;show&quot;
      = link_to &quot;Show this task&quot;, task, class: &quot;rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium&quot;
      = link_to 'Edit this task', edit_task_path(task), class: &quot;rounded-lg py-3 ml-2 px-5 bg-gray-100 inline-block font-medium&quot;
      %hr.mt-6
  </code></pre>
  <p>But it continues to render the attributes below each other.</p>
  <p><a href="https://i.stack.imgur.com/BJB7x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BJB7x.png" alt="enter image description here" /></a></p>
  <p>After playing around with it and trying to figure out why it doesn't pick up the style I replicated the html/css in codepen.io.</p>
  <pre><code>&lt;main class=&quot;container mx-auto mt-28 px-5 flex&quot;&gt;
    &lt;div class=&quot;w-full&quot;&gt;
      &lt;div class=&quot;flex justify-between items-center&quot;&gt;
        &lt;h1 class=&quot;font-bold text-4xl&quot;&gt;Tasks&lt;/h1&gt;
        &lt;a class=&quot;rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium&quot; href=&quot;/tasks/new&quot;&gt;New task&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class=&quot;min-w-full&quot;&gt;
        &lt;div class=&quot;grid gap-4 grid-cols-3&quot; id=&quot;Task_1&quot;&gt;
          &lt;div class=&quot;my-5&quot;&gt;
            &lt;strong class=&quot;block font-medium.mb-1&quot;&gt;Description:&lt;/strong&gt;
            complete page 2 in math exercise book
          &lt;/div&gt;
          &lt;div class=&quot;my-5&quot;&gt;
            &lt;strong class=&quot;block font-medium.mb-1&quot;&gt;Notes:&lt;/strong&gt;
            try also the advanced exercises, but don't spend more than 10 minutes on them
          &lt;/div&gt;
          &lt;div class=&quot;my-5&quot;&gt;
            &lt;strong class=&quot;block font-medium.mb-1&quot;&gt;Deadline:&lt;/strong&gt;
            My Deadline
          &lt;/div&gt;
        &lt;/div&gt;  
        &lt;div class=&quot;grid gap-4 grid-cols-3&quot; id=&quot;Task_2&quot;&gt;
          &lt;div class=&quot;my-5&quot;&gt;
            &lt;strong class=&quot;block font-medium.mb-1&quot;&gt;Description:&lt;/strong&gt;
            Description
          &lt;/div&gt;
          &lt;div class=&quot;my-5&quot;&gt;
            &lt;strong class=&quot;block font-medium.mb-1&quot;&gt;Notes:&lt;/strong&gt;
            Some flippin' notes
          &lt;/div&gt;
          &lt;div class=&quot;my-5&quot;&gt;
            &lt;strong class=&quot;block font-medium.mb-1&quot;&gt;Deadline:&lt;/strong&gt;
            My Deadline
          &lt;/div&gt;
        &lt;/div&gt;  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/main&gt;
  </code></pre>
  <p>There it rendered perfectly, just as I had intended.</p>
  <p><a href="https://i.stack.imgur.com/dCZqs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dCZqs.png" alt="enter image description here" /></a></p>
  <p>What am I missing? Any help appreciated.</p>