Why in the Django + Tailwindcss project, styles are used in one file and not in another?

Here is the project's file system: enter image description here

All classes work in this file: file: navbar.html

<nav class="bg-white shadow-lg"> 
    <div class="max-w-6xl max-auto px-4">
      <div class="flex justifly-between">
        <div class="space-x-7">
          <div class="flex">
            <a href="#" class="flex items-center px-2 py-4">
            <img class="h-8 w-8" src="{% static 'myapp/images/logo.png' %}" alt="logo"> 
            <span class="font-semibold text-xl"> Shop </span> 
            </a>
          </div>
          <div class="items-center flex space-x-1">
            <a href="#" class="py-4 px-2 font-semibold border-b-4 border-black ">Sell</a>
            <a href="#" class="py-4 px-2 font-semibold ">Sold</a>
            <a href="#" class="py-4 px-2 font-semibold ">Home</a>
          </div>
        </div>
      </div>
    </div>
  </nav>

In this file tailwind classes for some reason do not work. Why is this happening??? file: contacts.html

  <div class=" p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-3 xl:grid-cols-3 lg:grid-cols-3 gap-3 ">
    {% for item in items %}   
      <a href="{% url 'site:detail' item.id %}"> 
        <div class=" px-10 py-10 rounded overflow-hidden shadow-lg">
          <img src="{{item.images.url}} " alt="img">
          {{item.name}} {{item.price}} <br>
        </div>
      </a>
    {% endfor %} 
  </div>

Why does tailwind work in one part of the code and not in another? Even though both files are in the same folder.

You need to make tailwind work in the contacts.html file.

Back to Top