Неправильное отображение форм при использовании django с tailwind и crispy forms

При использовании фильтра {{ form|crispy}} в файле index.html поля ввода формы не отображаются с границами, как это должно быть при использовании 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. Это демонстрируется использованием стилей tailwind в (шаблонных) html-файлах. В качестве IDE я использую Pycharm. Я создал проект на основе 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: [
    ],
}

input.css

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

Команда, используемая для создания выходного css-файла:

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> css корректно изменяют отображаемые стили заголовков и кнопок.

myapp.form.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'),
]

Ниже приведен список каталогов и файлов в проекте.

Изображение, показывающее файлы в проекте django

Теперь у меня работает 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">

Надеюсь, это поможет

Вернуться на верх