Формы не отображаются должным образом при использовании django с попутным ветром и хрустящими формами. ⇐ CSS

[Anonymous]

При использовании фильтра {{ form|crispy}} в файле index.html поля ввода формы не отображаются с границами, как это должно быть при использовании Crispy Forms. Я посмотрел видео BugBytes на YouTube TailwindCSS и Django-Crispy-Forms — пакет шаблонов для форм Django!
Мне нужна помощь в том, чтобы заставить фильтр Crispy работать с Django. форма. Вот html-страница
Вот html-страница
Я использую Django 5.1.4 с Crispy-попутным ветром 1.03 и django-crispy-forms 2.3 с использованием Python 3.12.8
Выходные файлы CSS создаются правильно и на них есть ссылки в HTML. Это демонстрируется с помощью стилей попутного ветра в HTML-файлах (шаблонах). В качестве IDE я использую Pycharm. Я создал проект на основе Django с виртуальной средой, включенной в каталог проекта. Node.js установлен.
Ниже приведены инструкции командной строки, а выдержки взяты из соответствующих файлов (приносим извинения за такую ​​длину...):< /p>
Команды установки запускаются из .venv

Код: Выделить всё

npm install -D tailwindcss

Код: Выделить всё

npx tailwindcss init

Код: Выделить всё

npx tailwindcss -i ./static/css/input.css -o ./static/css/style.css --watch

Последняя команда используется для создания и обновления таблицы стилей попутного ветра.
package.json< /p>

Код: Выделить всё

"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 --смотреть
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 %}







Testing Crispy Forms





{% block content %}
{% endblock content %}

index.html

Код: Выделить всё

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

{% block content %}
Test form fields

{% csrf_token %}
{{ form|crispy }}
Submit

{% endblock content %}

Примечание. CSS и правильно изменяют отображаемый стиль заголовка и кнопок.
myapp.form.py< /strong>

Код: Выделить всё

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

myapp.views.py[/b]

Код: Выделить всё

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

Подробнее здесь: https://stackoverflow.com/questions/792 ... ispy-forms