why are only some css classes being generated in tailwind and others aren't?

Question

I have a project where I'm using Django as backend and tailwind for the css. tailwind is not giving me any errors and is finding classes in my files but not generating the css. the only class that its working for is bg-blue-500 and nothing else. if anyone could think of why this may be happening or how to fix is I would really appreciate it.

html page

<ul class="nav">
        <li class= "bg-red-500">
            <a class="" href="{% url 'activeListings' %}">Active Listings</a>
        </li>
        {% if user.is_authenticated %}
            <li class=" bg-blue-500">
                <a class="" href="{% url 'logout' %}">Log Out</a>
            </li>
        {% else %}
            <li class="">
                <a class="" href="{% url 'login' %}">Log In</a>
            </li>
            <li class="">
                <a class="" href="{% url 'register' %}">Register</a>
            </li>

tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
     h1 {
         @apply text-4xl;
   }
   h2 {
    @apply text-3xl;
}
h3 {
    @apply text-2xl;
}
h4 {
    @apply text-xl;
}

}

package.json

{
      "name": "jstools",
      "version": "1.0.0",
      "description": "",
      "main": "tailwind.config.js",
      "scripts": {
        "build": "tailwind build -i ../auctions/tailwind.css -o ../auctions/output.css && cleancss -o ../auctions/output.min.css ../auctions/output.css"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "dependencies": {
        "autoprefixer": "^10.4.12",
        "clean-css-cli": "^5.6.1",
        "tailwindcss": "^3.1.8"
      }
    }

tailwind.config

/** @type {import('tailwindcss').Config} */
   module.exports = {
    future: {
      removeDeprecatedGapUtilities: true,
      purgeLayersByDefault: true,
   },
  content: {
     enabled: false, //true for production build
     content: ['../../templates/auctions/*.html',        '../../templates/**/*.html']
    },
   theme: {
     screens: {
          sm: '640px',
          md: '768px',
          lg: '1024px',
          xl: '1280px'
     },

      extend: {},
 },
 variants: {},
 plugins: [],
 }

file structure