使用Django、Tailwind与Crispy Forms时表单样式异常求助

环境与问题简述 #

使用 Django 5.1.4、crispy-tailwind 1.0.3、django-crispy-forms 2.3（Python 3.12.8 环境）开发时，在index.html中通过{{ form|crispy }}过滤器渲染表单，输入框未显示预期的边框样式。已按照BugBytes的YouTube视频《TailwindCSS and Django-Crispy-Forms - Template Pack for Django Forms!》完成项目配置，Tailwind CSS已正常构建并生效（页面标题<h1>和按钮样式可正常渲染），仅表单输入框样式异常。

项目配置详情 #

虚拟环境执行的配置命令 #

npm install -D tailwindcss
npx tailwindcss init
npx tailwindcss -i ./static/css/input.css -o ./static/css/style.css --watch

最后一条命令用于实时创建并更新Tailwind样式表。

package.json 依赖配置 #

"devDependencies": {
  "tailwindcss": "^3.4.16"
}

tailwind.config.js 完整配置 #

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./templates/**/*.{html,js}"],
    theme: {
        extend: {},
    },
    plugins: [
    ],
}

input.css 基础样式文件 #

@tailwind base;
@tailwind components;
@tailwind utilities;

样式文件生成命令 #

npx tailwindcss -i ./src/input.css -o ./build/css/style.css --watch

settings.py 关键配置 #

INSTALLED_APPS = [
...
# Third party apps
'crispy_forms',
'crispy_tailwind',
...
]
CRISPY_ALLOWED_TEMPLATE_PACKS = "tailwind"
CRISPY_TEMPLATE_PACK = "tailwind"

...
STATICFILES_DIRS = [
    BASE_DIR / 'static',
    ]

模板文件代码 #

base.html 基础模板 #

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Testing Crispy Forms</title>
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>

<body>
    <div class="m-8">
        {% block content %}
        {% endblock content %}
    </div>
</body>
</html>

index.html 表单页面模板 #

{% extends "base.html" %}
{% load tailwind_filters %}

{% block content %}
<h1 class="text-4xl font-bold mb-8">Test form fields</h1>
<form method="POST">
    {% csrf_token %}
    {{ form|crispy }}
    <button class="text-white bg-blue-700 ">Submit</button>
</form>
{% endblock content %}

注：<h1>和<button>的Tailwind样式已正确生效，可正常修改标题和按钮样式。

表单与视图配置 #

myapp/forms.py 表单定义 #

class MyForm(forms.Form):
    name = forms.CharField(label='Your Name', max_length=100, required=True)

myapp/views.py 视图逻辑 #

def index(request):
    context = {'form': MyForm()}
    return render(request, 'index.html', context)

urls.py 路由配置 #

from myapp.views import index

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', index, name='index'),
]

补充说明 #

• 项目目录文件结构参考截图
• 页面效果参考截图（输入框无预期边框样式）

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