Styling with TailwindCSS

Allauth elements: styling the form and fields

Want more?

This lesson for enrolled students only. Join the course to unlock it!

You can see the code changes implemented in this lecture below.

If you have purchased the course in a different platform, you still have access to the code changes per lecture here on Teclado. The lecture video and lecture notes remain locked.

Join course for $15

New files

templates/allauth/elements/form.html

{% load allauth %}
<form method="{{ attrs.method }}" action="{{ attrs.action }}" class="allauth-form space-y-2 mt-2 flex flex-col">
    {% slot body %}
    {% endslot %}
    {% slot actions %}
    {% endslot %}
</form>

templates/allauth/elements/field.html

{% load allauth %}
{{ attrs.errors }}
<p>
    {% if attrs.type == "textarea" %}
        <label for="{{ attrs.id }}">
            {% slot label %}
            {% endslot %}
        </label>
        <textarea {% if attrs.required %}required{% endif %}
                  {% if attrs.rows %}rows="{{ attrs.rows }}"{% endif %}
                  {% if attrs.disabled %}disabled{% endif %}
                  {% if attrs.readonly %}readonly{% endif %}
                  {% if attrs.checked %}checked{% endif %}
                  {% if attrs.name %}name="{{ attrs.name }}"{% endif %}
                  {% if attrs.id %}id="{{ attrs.id }}"{% endif %}
                  {% if attrs.placeholder %}placeholder="{{ attrs.placeholder }}"{% endif %}>{% slot value %}{% endslot %}</textarea>
    {% else %}
        <label for="{{ attrs.id }}">
            {% slot label %}
            {% endslot %}
        </label>
        <input {% if attrs.required %}required{% endif %}
               {% if attrs.disabled %}disabled{% endif %}
               {% if attrs.readonly %}readonly{% endif %}
               {% if attrs.checked %}checked{% endif %}
               {% if attrs.name %}name="{{ attrs.name }}"{% endif %}
               {% if attrs.id %}id="{{ attrs.id }}"{% endif %}
               {% if attrs.placeholder %}placeholder="{{ attrs.placeholder }}"{% endif %}
               {% if attrs.autocomplete %}autocomplete="{{ attrs.autocomplete }}"{% endif %}
               {% if attrs.value is not None %}value="{{ attrs.value }}"{% endif %}
               type="{{ attrs.type }}">
    {% endif %}
    {% if slots.help_text %}
        <span>
            {% slot help_text %}
            {% endslot %}
        </span>
    {% endif %}
</p>

Modified files

static/input.css

--- 
+++ 
@@ -36,4 +36,20 @@

 details > summary::-webkit-details-marker {
   display: none;
+}
+
+input[type="radio"] {
+  @apply text-emerald-600 ml-1 h-4 w-4 focus:ring-emerald-500;
+}
+
+.allauth-form input[type="email"] {
+  @apply w-full rounded-md text-black;
+}
+
+.allauth-form p:has(input[type="email"]) {
+  @apply text-left;
+}
+
+.allauth-form p:has(input[type="email"]) label {
+  @apply font-bold;
 }