How to incorporate django-tailwind into django rendered forms for input fields?
I have the following form:
<form class="form" method="post" action=".">
{% csrf_token %}
<div class="error-wrapper">
<div class="errors">{{ form.errors }}</div>
</div>
<div class="email-wrapper field-wrapper">
<div class="tag name-tag">{{ form.username.label }}*</div>
<!-- How to apply tailwind css classes to the rendered input field here? -->
<div class="input rounded-lg">{{ form.username }}</div>
</div>
...
</form>
# forms.py
class SignUpForm(UserCreationForm):
first_name = forms.CharField(max_length=30, required=True)
last_name = forms.CharField(max_length=30, required=True)
email = forms.EmailField(max_length=254, help_text='Required. Inform a valid email address.')
class Meta:
model = User
fields = ('username', 'first_name', 'last_name', 'email', 'password1', 'password2')
Now I want to apply tailwind classes to the input
field which is rendered by {{ form.username }}
.
But how to basically do it? Is there any way to apply classes to the element other than changing the form class itself?
I set it up as follows which isn't the desired solution though:
class SignUpForm(UserCreationForm):
tailwind_class = """w-full border-2 border-ch-gray-light
bg-ch-gray-dark rounded-lg
focus:outline-ch-green-light focus:outline-0
focus:outline-offset-0 focus:border-2
focus:border-woys-purple focus:shadow-none
focus:ring-0 focus:shadow-0"
"""
email = forms.EmailField(required=True, widget=forms.EmailInput(attrs={
'class': tailwind_class
}))
password1 = forms.CharField(widget=forms.PasswordInput(attrs={'class': tailwind_class}))
password2 = forms.CharField(widget=forms.PasswordInput(attrs={'class': tailwind_class}))
class Meta:
model = User
fields = ('email', 'password1', 'password2')