Django Tailwind

Tutorial ini menunjukkan cara mengkonfigurasi Django dan TailwindCSS dari awal dalam projek baharu.

Persediaan Django

Buat persekitaran maya baharu yang dipanggil .venv.

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

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

Kemudian pasang Django dan buat projek baharu yang dipanggil django_project.

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

Buat direktori templat peringkat projek daripada baris arahan menggunakan arahan mkdir.

(.venv) $ mkdir templates

Kami akan menyimpan templat kami di sini dan bukannya dalam setiap apl. Walau bagaimanapun, kita perlu memberitahu Django tempat untuk mencarinya dengan mengemas kini konfigurasi TEMPLATES dalam settings.py.

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

Buat fail templat/base.html.

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

Jika kami bijak menggunakan ' django_project/urls.py ', kami boleh memasukkan paparan dan URL dalam satu fail. Import TemplateView di bahagian atas dan kemudian tetapkan laluan yang menghala ke templat, 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
]

Gunakan arahan runserver untuk mengesahkan halaman utama berfungsi.

(.venv) $ python manage.py runserver

Tailwind Konfigurasi

Dokumen Tailwind mempunyai panduan pemasangan yang boleh kami ikuti dengan hanya beberapa perubahan. Buka sesi terminal baharu daripada direktori projek: kami akhirnya perlu menjalankan dua, satu dengan pelayan Django kami dan satu dengan Node.

Dalam tetingkap terminal baharu, pastikan anda telah memasang Node pada komputer anda. Anda boleh menyemak dengan node-v.

$ node -v
v20.17.0

Buat fail package.json untuk menggunakan Node dan Tailwind bersama-sama. Tambahkan bendera -y untuk mengatakan ya kepada semua lalai.

$ npm init -y

Ini ialah fail package.json yang terhasil.

{
  "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"
}

Pasang Tailwind melalui npm.

$ npm install -D tailwindcss

Ini mencipta direktori node_modules. Seterusnya buat fail tailwind.config.js.

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

Kini kami mempunyai fail tailwind.config.js. Tambahkan laluan padanya untuk direktori templat kami.

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

Dalam projek Django, cipta direktori statik dan subdirektori yang dipanggil src.

$ mkdir static
$ mkdir static/src

Kami perlu memberitahu Django untuk mencari fail di sini dengan mengemas kini konfigurasi STATICFILES_DIRS.

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

Kemudian buat fail CSS baharu yang dipanggil static/src/styles.css dan tambahkan arahan @tailwind padanya.

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

Langkah seterusnya ialah memulakan proses binaan Tailwind CLI. Ia akan mengimbas fail templat kami untuk kelas dan membina CSS yang diperlukan. Kami telah menukar laluan dari tapak web Tailwind sedikit di sini supaya ia kelihatan dalam fail src/styles.css dan output kepada dist/styles.css.

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

Untuk mencubanya, kemas kini fail templat base.html dengan beberapa kelas Tailwind. Adalah penting untuk menambah teg statik beban di bahagian atas dan juga memautkan ke helaian gaya baharu. Kemudian, kami menambah kelas asas untuk menjadikan tajuk merah dan teks di bawah biru.

<!-- 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>

Muat semula halaman utama.

Anda boleh melihat kemas kini pada teks yang menunjukkan bahawa Tailwind dipasang dengan betul.

tonton: Skrip css

Kami mempunyai pemasangan asas yang sedang berjalan, tetapi anda akan mendapati bahawa beberapa ciri tambahan meningkatkan keadaan dengan ketara.

Pertama, kami tidak mahu mengingati arahan yang besar dan panjang itu untuk menjalankan Node. Kita boleh meletakkannya di dalam fail package.json sebagai skrip yang bermula dengan "watch:css."

// 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"
  }
}

Di terminal tempat Node berjalan, hentikannya dengan Ctrl+c. Taip npm run watch:css dan ia sepatutnya bermula seperti sebelumnya.

$ npm run watch:css

Muat semula halaman web untuk memastikan semuanya masih berfungsi.

Kesimpulan

Seperti yang telah kita lihat, Tailwind berfungsi dengan baik dengan Django. Untuk kebaikan tambahan, lihat django-browser-reload untuk memuat semula penyemak imbas anda secara automatik dalam pembangunan supaya anda tidak perlu melakukan muat semula keras sepanjang masa. Terdapat juga pakej pihak ketiga yang diselenggara dengan baik, django-tailwind, yang menyediakan pendekatan lain untuk menyepadukan Tailwind dengan Django.

Atas ialah kandungan terperinci Django Tailwind. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!