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