Two tools, two jobs

Tailwind is utility CSS: you style elements with classes such as rounded px-4 py-2. crispy-forms is a Django app that renders forms as HTML. Together they replace hand-written CSS and the bare output of {{ form.as_p }}.

Tailwind scans sources and builds one CSS file
Tailwind scans sources and builds one CSS file
PartQuestion it answers
Tailwindhow do elements look
crispy-formswhat markup does a form produce
crispy-tailwindwhich Tailwind classes does that markup use

Tailwind without Node

Tailwind v4 ships a standalone executable, so a Django project does not need npm. Create an input file:

css
/* static/src/input.css */
@import "tailwindcss";

@source "../../templates";
@source "../../blog";

@theme {
  --color-brand: #2563eb;
}

Run the binary (download it from the Tailwind GitHub releases):

bash
# get the binary: tailwindlabs/tailwindcss releases
# development: rebuild on every change
./tailwindcss -i static/src/input.css -o static/css/app.css --watch

# production: one minified file
./tailwindcss -i static/src/input.css -o static/css/app.css --minify

Connect the result to Django:

python
# settings.py
STATIC_URL = "static/"
STATICFILES_DIRS = [BASE_DIR / "static"]
html
{% load static %}
<link rel="stylesheet" href="{% static 'css/app.css' %}">