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 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>

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')
Back to Top