full width form fields 'everywhere'

also distinguish between labeled/placeholder style

theme/templates/tailwind_forms/formfield.html

@@ -1,6 +1,12 @@
 {% if formfield %}
 <div class="text-lg mb-6 md:mb-8">
-    <input name="{{ formfield.name }}" type="{{ formfield.field.widget.input_type }}" class="{% if formfield.errors %}bg-red-100{% else %}bg-slate-100{% endif %} pl-4 py-2 md:py-4 focus:outline-none w-full" {% if formfield.value %}value="{{ formfield.value }}"{% endif %} placeholder="{{ formfield.label }}" />
+
+    {% if not implicit %}
+        <div class="text-slate-800 font-bold">{{ formfield.label }}:</div>
+    {% endif %}
+
+    {{ formfield }}
+
     {% if formfield.errors %}
     {% for error in formfield.errors %}
         <div class="text-red-500 pt-1 px-2 text-sm">{{ error }}</div>

theme/templatetags/tailwind_forms.py

@@ -5,5 +5,28 @@ register = template.Library()
 
 
 @register.inclusion_tag('tailwind_forms/formfield.html')
-def tailwind_formfield(formfield):
-    return {'formfield': formfield}
+def tailwind_formfield(formfield, implicit=False):
+    # we just monkey-patch the class attr. if (i.e. as long as) it works, it ain't stupid
+    if not formfield:
+        return {"formfield": None}
+
+    if formfield.errors:
+        formfield.field.widget.attrs['class'] = "bg-red-50"
+    else:
+        formfield.field.widget.attrs['class'] = "bg-slate-50"
+    formfield.field.widget.attrs['class'] += " pl-4 py-2 md:py-4 focus:outline-none w-full"
+
+    if implicit:
+        formfield.field.widget.attrs['placeholder'] = formfield.label
+
+    return {
+        'formfield': formfield,
+        'implicit': implicit,
+    }
+
+
+@register.inclusion_tag('tailwind_forms/formfield.html')
+def tailwind_formfield_implicit(formfield):
+    # implicit meaning: the label is rendered as a placeholder. This only works for text inputs and fire-once (i.e. the
+    # first time the form is rendered)
+    return tailwind_formfield(formfield, True)