如何为Django渲染表单的输入字段应用django-tailwind样式？

问题背景 #

现有如下Django表单模板和表单类，需要为{{ form.username }}渲染出的<input>元素添加Tailwind CSS样式类，同时想了解除修改表单类外的其他实现方式：

模板代码 #

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

        <!-- 如何为这里渲染的input字段应用Tailwind CSS类？ -->
        <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')

实现方法 #

方法一：修改表单类（定义时添加样式） #

方式1：重写字段并指定widget属性

直接在表单类中重写username字段，通过widget的attrs参数添加样式类：

class SignUpForm(UserCreationForm):
    # 重写username字段，添加Tailwind样式
    username = forms.CharField(
        widget=forms.TextInput(attrs={'class': 'border-gray-300 rounded-lg px-4 py-2 w-full'})
    )
    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')

方式2：在__init__方法中动态添加样式

如果不想重写字段，可在表单初始化时为字段的widget更新属性：

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

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # 为username字段添加Tailwind样式类
        self.fields['username'].widget.attrs.update({'class': 'border-gray-300 rounded-lg px-4 py-2 w-full'})

方法二：不修改表单类，在模板中处理 #

方式1：使用as_widget方法指定属性

在模板中直接调用字段的as_widget方法，传入attrs参数添加样式：

<div class="input rounded-lg">
    {{ form.username.as_widget(attrs={'class': 'border-gray-300 rounded-lg px-4 py-2 w-full'}) }}
</div>

方式2：手动渲染input标签

完全手动编写<input>元素，复用表单字段的name、id、required等属性，同时添加样式类：

<div class="input rounded-lg">
    <input type="text" 
           name="{{ form.username.name }}" 
           id="{{ form.username.id_for_label }}" 
           value="{{ form.username.value|default:'' }}"
           class="border-gray-300 rounded-lg px-4 py-2 w-full"
           {% if form.username.field.required %}required{% endif %}>
</div>

方式3：直接修改widget的attrs（模板内）

在模板中先更新字段widget的属性，再渲染字段：

{% with form.username.widget.attrs.class="border-gray-300 rounded-lg px-4 py-2 w-full" %}
    {{ form.username }}
{% endwith %}

内容的提问来源于stack exchange，提问作者JSRB