İki alət, iki vəzifə

Tailwind utility CSS-dir: elementləri rounded px-4 py-2 kimi siniflərlə bəzəyirsiniz. crispy-forms isə formaları HTML kimi render edən Django tətbiqidir. Birlikdə onlar əl ilə yazılan CSS-i və {{ form.as_p }}-nin çılpaq çıxışını əvəz edir.

Tailwind mənbələri skan edir və bir CSS faylı yığır
Tailwind mənbələri skan edir və bir CSS faylı yığır
HissəHansı suala cavab verir
Tailwindelementlər necə görünür
crispy-formsforma hansı markup-ı verir
crispy-tailwindbu markup hansı Tailwind siniflərini işlədir

Node olmadan Tailwind

Tailwind v4 müstəqil icra faylı ilə gəlir, ona görə Django layihəsində npm lazım deyil. Giriş faylı yaradın:

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

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

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

İkili faylı işə salın (Tailwind-in GitHub buraxılışlarından yükləyin):

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

Nəticəni Django-ya qoşun:

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