Tailwind Grid not working in Phoenix

I am trying to use tailwind grid inside html.heex file but it doesn’t work properly. It lists everything like this:

Here is my index.html.heex

<div class="flex flex-wrap">
  <div class="w-screen md:w-2/3">
    <div class="card shadow">
      <div class="card-header md:flex justify-between">
       <h1 align="center" class="card-title">
       <img src= />
        </h1>
        <%= f = form_for @changeset, "#", phx_change: "change", as: "change" %>
          <%= label f, :phrase, class: "tag-label" do %>
            <div class="tag-icon">
              <%= text_input f, :phrase, class: "tag-input", phx_debounce: 500, placeholder: "phrase" %>
            </div>
          <% end %>
      </div>
      <div class="card-body prose max-w-screen">

        <div class="p-8 bg-amber-300">
            <div class="grid grid-cols-4 md:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-8">
            <div class="p-4 bg-cyan-400 rounded-md flex items-center justify-center">1</div>
            <div class="p-4 bg-cyan-400 rounded-md flex items-center justify-center">2</div>
            <div class="p-4 bg-cyan-400 rounded-md flex items-center justify-center">3</div>
            <div class="p-4 bg-cyan-400 rounded-md flex items-center justify-center">4</div>
         </div>

        </div>
        <table class="table">
          <thead>
            <tr>
              <th></th>
              <th></th>
            </tr>
          </thead>
          <tbody id="posts">
            <%= for post <- @posts do %>
                <tr>
                <td><%= post.title %></td>
                </tr>
            <% end %>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

I even tried putting the grid div on top of all code, but that also didnt work

CSS grid affects children of the element not siblings. You‘ll need to put the classes on the parent element to the items you want to arrange in a grid.

I put grid div on top my first div

but that didn’t work too:

something like this

        <div class="p-8 bg-amber-300">
            <div class="grid grid-cols-4 md:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-8">
            <div class="p-4 bg-cyan-400 rounded-md flex items-center justify-center">1</div>
            <div class="p-4 bg-cyan-400 rounded-md flex items-center justify-center">2</div>
            <div class="p-4 bg-cyan-400 rounded-md flex items-center justify-center">3</div>
            <div class="p-4 bg-cyan-400 rounded-md flex items-center justify-center">4</div>
         </div>

<div class="flex flex-wrap">
</div>

Looks like you’re missing a closing div for the grid/grid container in that snippet. You could run the formatter so the tags are indented correctly.