Many individuals encounter this issue, but the solution is straightforward.
If you prefer not to modify css from your django app directly and instead want to add CSS codes to your .css file, you should examine the output of the {{ form.as_p }} tag (utilize tools like firebug). Then, write the necessary CSS for that displayed output in your .css file
For example; Let's assume that the {{ form.as_p }} produces the following output:
<form action="." method="POST" id="login_form" class="login">
<p>
<label for="id_user_name">User Name:</label>
<input id="id_user_name" type="text" name="user_name" maxlength="100" />
</p>
<p>
<label for="id_password">Message:</label>
<input type="text" name="message" id="id_password" />
</p>
</form>
Upon reviewing the output, you'll notice that each tag has its own unique id. This allows you to create specific css styles based on these ids.
Alternatively, assign an id to your form tag and write css rules for the elements within that form tag. This approach is simpler and more memorable. Furthermore, these styles can be applied to all forms with the same id.
Additional Information:
If you plan on making modifications to any allauth html files, remember to copy them from the library to your project's template folder first.