Forms not displaying properly when using django with tailwind and crispy forms

When using {{ form|crispy}} filter in the index.html file, the form input fields are not shown with borders as they should be when using Crispy Forms. I have followed the BugBytes YouTube video TailwindCSS and Django-Crispy-Forms - Template Pack for Django Forms!

I am looking for help with getting the Crispy filter working with a Django form. Here is the html page

Here is the html page

I am using Django 5.1.4 with crispy-tailwind 1.03 and django-crispy-forms 2.3 using python 3.12.8

The output css files are being built correctly and referenced in the html. This is demonstrated by using tailwind styles in the (template) html files. I am using Pycharm as my IDE. I have created a Django based project with a virtual environment included in the project directory. Node.js has been installed.

The following are command line instructions and excerpts are from relevant files (apologies for it being so long ...):

Setup commands run from the .venv

npm install -D tailwindcss

npx tailwindcss init

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

The last command is used to create and update the tailwind stylesheet.

package.json

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

tailwind.config.js (entire file)

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

input.css

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

Command used to create the output css file:

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

Note: <h1> and <button> css correctly alters the displayed heading and button styles.

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

The following is a list of the directories and files in the project.

Image showing the files in the django project

I now have the Crispy Form working. I am sharing what I found in case it might help others. The YouTube tutorial I was following has an approach to installing and initiating Tailwind that is different to the method given on the tailwind.com site https://django-tailwind.readthedocs.io/en/2.3.0/installation.html Using these steps, the package.json file has a script for updating the css file. Access to this script is via the command:

python manage.py tailwind build

I also changed the class used on the form:

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

I hope this helps

Back to Top