I'm building an application using django-tailwind and everything has been working fine until I started creating the login page. The Tailwind styles I've set in forms.py for the login form inputs are not being applied. My project is structured with a theme app (following django-tailwind instructions) that holds the base templates and a separate account app for login and registration pages.

I've attempted several solutions (including restarting both the Django and Tailwind servers and running tailwind build) without success. I've also updated the tailwind.config.js file to include ./**/*.py under theme/static_src.

Below are the relevant code snippets:

account/views.py

PYTHONCopied
from django.contrib.auth import logout, login
from django.shortcuts import render, redirect
from django.contrib import messages
from .forms import CustomLoginForm
# Create your views here.

def login_view(request):
    form = CustomLoginForm()

    context = {
        'form': form,
    }

    messages.success(request, 'You have successfully logged in.')
    return render(request, 'registration/login.html', context=context)

def logout_view(request):
    logout(request)
    messages.success(request, 'You have successfully logged out.')
    return redirect('home:index')

account/forms.py

PYTHONCopied
from django.contrib.auth.models import User  # Ensure you import the correct User model
from django import forms
from django.forms import TextInput

class CustomLoginForm(forms.Form):
    username = forms.CharField(
        widget=forms.TextInput(attrs={
            'class': 'w-full bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500',
            'placeholder': 'Username'
        }),
        required=True
    )

    password = forms.CharField(
        label='Password',
        widget=forms.PasswordInput(attrs={
            'class': 'w-full bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 '
                     'focus:border-primary-600 block p-2.5 dark:bg-gray-700 dark:border-gray-600 '
                     'dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500',
            'placeholder': '••••••••'
        }),
        required=True
    )

/templates/registration/login.html

DJANGOCopied
{% extends 'base/base.html' %}
{% load static %}

{% block title %}
    Login
{% endblock title %}

{% block navbar %}
{% endblock navbar %}

{% block content %}
<div class="-my-10">
    <section class="bg-gray-50 dark:bg-gray-800 sm:my-48 md:my-0">
        <div class="flex items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
            <div class="md:my-10 w-full bg-white rounded-lg shadow dark:border sm:max-w-md xl:p-0 dark:bg-gray-900 dark:border-gray-700">
                <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
                    <div class="flex justify-center py-10">
                        <a href="{% url 'home:index' %}" class="flex items-center">
                            <img class="w-48 md:w-64" src="{% static 'images/logo/logo.png' %}" alt="RateMyMOS logo">
                        </a>
                    </div>
                    <h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-gray-400 text-center">
                        Log in to your account
                    </h1>
                    <form class="space-y-4 md:space-y-6 text-gray-600" method="post">
                        {% csrf_token %}

                        <div class="w-full">
                            <p class="text-black dark:text-gray-400 pb-2">{{ form.username.label }}</p>
                            {{ form.username }}
                        </div>

                        <div class="w-full">
                            <p class="text-black dark:text-gray-400 pb-2">{{ form.password.label }}</p>
                            {{ form.password }}
                        </div>

                        <div class="flex items-center justify-end">
                            <a href="#" class="text-sm font-medium text-primary-600 hover:underline dark:text-primary-500">Forgot password?</a>
                        </div>

                        <button type="submit" class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">Log in</button>
                        <p class="text-sm font-light text-gray-500 dark:text-gray-400">
                            Don’t have an account yet? <a href="#" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Sign up</a>
                        </p>
                    </form>
                </div>
            </div>
        </div>
    </section>
</div>

{% endblock content %}

I'm looking for guidance on why the Tailwind classes defined in my Django form are not being applied on the login page. Any insights or suggestions would be greatly appreciated.