使用带有顺风和脆皮表单的 django 时，表单无法正确显示

Question

在index.html 文件中使用 {{ form|crispy}} 过滤器时，表单输入字段不会像使用 Crispy Forms 时那样显示边框。我关注了 BugBytes YouTube 视频

TailwindCSS and Django-Crispy-Forms - Template Pack for Django Forms!

我正在寻求帮助让 Crispy 过滤器与 Django 表单一起使用。这是html页面

这是html页面

我使用Django 5.1.4和crispy-tailwind 1.03，django-crispy-forms 2.3使用python 3.12.8

输出的 css 文件已正确构建并在 html 中引用。这是通过在（模板）html 文件中使用顺风样式来演示的。我使用 Pycharm 作为我的 IDE。我创建了一个基于 Django 的项目，项目目录中包含一个虚拟环境。 Node.js 已安装。

以下是命令行说明，摘录来自相关文件（抱歉这么长......）：

安装命令从 .venv

运行

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: [
    ],
}

输入.css

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

用于创建输出 css 文件的命令：

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

设置.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 %}

注意：

和

Answer 1

我现在可以使用 Crispy Form 了。我正在分享我的发现，以防对其他人有所帮助。我遵循的 YouTube 教程提供了一种安装和启动 Tailwind 的方法，该方法与 tailwind.com 网站上给出的方法不同 https://django-tailwind.readthedocs.io/en/2.3.0/installation.html 通过这些步骤，package.json 文件具有用于更新 css 文件的脚本。通过以下命令访问此脚本：

python manage.py tailwind build

我还更改了表单上使用的类：

<form class="max-w-sm mx-auto" method="POST">

我希望这有帮助

使用带有顺风和脆皮表单的 django 时，表单无法正确显示

问题描述投票：0回答：1

和

1个回答

最新问题

使用带有顺风和脆皮表单的 django 时，表单无法正确显示

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1