Django Rückenwind

Dieses Tutorial zeigt, wie man Django und TailwindCSS in einem neuen Projekt von Grund auf konfiguriert.

Django-Setup

Erstellen Sie eine neue virtuelle Umgebung mit dem Namen .venv.

# Windows
$ python -m venv .venv
$ .venv\Scripts\Activate.ps1
(.venv) $

# macOS/Linux
$ python3 -m venv .venv
$ source .venv/bin/activate
(.venv) $

Dann installieren Sie Django und erstellen Sie ein neues Projekt namens django_project.

(.venv) $ python -m pip install django
(.venv) $ django-admin startproject django_project .

Erstellen Sie über die Befehlszeile mit dem Befehl mkdir ein Vorlagenverzeichnis auf Projektebene.

(.venv) $ mkdir templates

Wir speichern unsere Vorlagen hier und nicht in jeder App. Allerdings müssen wir Django mitteilen, wo sie zu finden sind, indem wir die TEMPLATES-Konfiguration in Settings.py aktualisieren.

# django_project/settings.py
TEMPLATES = [
    {
        ...
        "DIRS": [BASE_DIR/"templates"],  # new
        ...
    }
]

Erstellen Sie eine templates/base.html-Datei.

<!-- templates/base.html -->
<h1>Hello, World</h1>

Wenn wir „django_project/urls.py“ geschickt verwenden, können wir die Ansicht und URLs in einer Datei zusammenfassen. Importieren Sie oben TemplateView und legen Sie dann einen Pfad fest, der auf die Vorlage verweist, base.html.

# django_project/urls.py
from django.contrib import admin
from django.urls import path
from django.views.generic import TemplateView  # new

urlpatterns = [
    path("admin/", admin.site.urls),
    path("", TemplateView.as_view(template_name="base.html"),),  # new
]

Verwenden Sie den Befehl „runserver“, um zu bestätigen, dass die Homepage funktioniert.

(.venv) $ python manage.py runserver

Rückenwind-Konfiguration

Die Tailwind-Dokumente enthalten eine Installationsanleitung, der wir mit nur wenigen Änderungen folgen können. Öffnen Sie eine neue Terminalsitzung aus dem Projektverzeichnis: Letztendlich müssen zwei Sitzungen ausgeführt werden, eine mit unserem Django-Server und eine mit Node.

Stellen Sie im neuen Terminalfenster sicher, dass Node auf Ihrem Computer installiert ist. Sie können dies mit node-v überprüfen.

$ node -v
v20.17.0

Erstellen Sie eine package.json-Datei, um Node und Tailwind zusammen zu verwenden. Fügen Sie das Flag -y hinzu, um alle Standardeinstellungen mit „Ja“ zu bestätigen.

$ npm init -y

Dies ist die resultierende package.json-Datei.

{
  "name": "django-tailwind",
  "version": "1.0.0",
  "description": "How to configure Django and Tailwind from scratch in a new project.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Tailwind über npm installieren.

$ npm install -D tailwindcss

Dadurch wird ein Verzeichnis „node_modules“ erstellt. Erstellen Sie als Nächstes eine tailwind.config.js-Datei.

$ npx tailwindcss init
Created Tailwind CSS config file: tailwind.config.js

Jetzt haben wir eine tailwind.config.js-Datei. Fügen Sie Pfade für unser Vorlagenverzeichnis hinzu.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./templates/**/"],  // updated line here!
  theme: {
    extend: {},
  },
  plugins: [],
}

Erstellen Sie im Django-Projekt ein statisches Verzeichnis und ein Unterverzeichnis namens src.

$ mkdir static
$ mkdir static/src

Wir müssen Django anweisen, hier nach Dateien zu suchen, indem wir die STATICFILES_DIRS-Konfiguration aktualisieren.

# settings.py
STATICFILES_DIRS = [BASE_DIR / "static",]  # new

Dann erstellen Sie eine neue CSS-Datei mit dem Namen static/src/styles.css und fügen Sie @tailwind-Anweisungen hinzu.

/* static/src/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Der nächste Schritt besteht darin, den Tailwind CLI-Build-Prozess zu starten. Es durchsucht unsere Vorlagendateien nach Klassen und erstellt das erforderliche CSS. Wir haben die Pfade von der Tailwind-Website hier leicht geändert, sodass sie in der Datei src/styles.css angezeigt werden und in dist/styles.css ausgegeben werden.

$ npx tailwindcss -i ./static/src/styles.css -o ./static/dist/styles.css --watch

Um es auszuprobieren, aktualisieren Sie die Vorlagendatei base.html mit einigen Tailwind-Klassen. Es ist wichtig, oben das Load-Static-Tag hinzuzufügen und auch auf das neue Stylesheet zu verlinken. Dann fügen wir Grundklassen hinzu, um den Titel rot und den Text darunter blau zu machen.

<!-- templates/base.html -->
{% load static %}
<link href="{% static 'dist/styles.css' %}" rel="stylesheet">
<h1 class="text-red-600">Hello, World</h1>
<p class="text-blue-600">More text</p>

Aktualisieren Sie die Homepage gründlich.

Sie können die Aktualisierungen des Textes sehen, der darauf hinweist, dass Tailwind ordnungsgemäß installiert ist.

watch:css-Skript

Wir haben eine Grundinstallation in Betrieb, aber Sie werden bald feststellen, dass ein paar zusätzliche Funktionen die Dinge erheblich verbessern.

Erstens möchten wir uns nicht an den großen, langen Befehl erinnern, mit dem Node ausgeführt wird. Wir können es als Skript in die Datei package.json einfügen, das mit „watch:css“ beginnt.

// package.json
{
  "name": "django-tailwind",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch:css": "npx tailwindcss -i ./static/src/styles.css -o ./static/dist/styles.css --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "tailwindcss": "^3.4.10"
  }
}

Im Terminal, in dem Node ausgeführt wird, stoppen Sie es mit Strg+c. Geben Sie npm run watch:css ein und es sollte wie zuvor starten.

$ npm run watch:css

Aktualisieren Sie die Webseite, um sicherzustellen, dass alles weiterhin funktioniert.

Abschluss

Wie wir gesehen haben, funktioniert Tailwind gut mit Django. Für zusätzliche Extras schauen Sie sich django-browser-reload an, um Ihren Browser in der Entwicklung automatisch neu zu laden, sodass Sie nicht ständig harte Aktualisierungen durchführen müssen. Es gibt auch ein gut gepflegtes Drittanbieterpaket, django-tailwind, das einen weiteren Ansatz zur Integration von Tailwind in Django bietet.

Das obige ist der detaillierte Inhalt vonDjango Rückenwind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!