薑戈順風

本教學示範如何在新專案中從頭開始設定 Django 和 TailwindCSS。

Django 設定

建立一個名為 .venv 的新虛擬環境。

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

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

然後安裝 Django 並建立一個名為 django_project 的新專案。

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

使用 mkdir 指令從命令列建立專案級範本目錄。

(.venv) $ mkdir templates

我們將在這裡儲存我們的模板，而不是在每個應用程式中。但是，我們需要透過更新 settings.py 中的 TEMPLATES 配置來告訴 Django 在哪裡可以找到它們。

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

建立 templates/base.html 檔案。

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

如果我們巧妙地使用“django_project/urls.py”，我們可以將視圖和 URL 包含在一個檔案中。在頂部導入TemplateView，然後設定一個指向模板的路徑，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
]

使用 runserver 指令確認首頁正常運作。

(.venv) $ python manage.py runserver

順風配置

Tailwind 文件有一個安裝指南，我們只需進行一些更改即可遵循。從專案目錄中開啟一個新的終端會話：我們最終需要執行兩個終端會話，一個使用我們的 Django 伺服器，另一個使用 Node。

在新的終端機視窗中，請確保您的電腦上安裝了 Node。你可以用node-v來檢查。

$ node -v
v20.17.0

建立 package.json 檔案以一起使用 Node 和 Tailwind。新增 -y 標誌以對所有預設值表示“是”。

$ npm init -y

這是產生的 package.json 檔案。

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

透過 npm 安裝 Tailwind。

$ npm install -D tailwindcss

這將建立一個 node_modules 目錄。接下來建立一個 tailwind.config.js 檔案。

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

現在我們有了一個 tailwind.config.js 檔案。為我們的模板目錄新增路徑。

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

在 Django 專案中，建立一個靜態目錄和一個名為 src 的子目錄。

$ mkdir static
$ mkdir static/src

我們需要透過更新 STATICFILES_DIRS 配置告訴 Django 在這裡查找檔案。

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

然後建立一個名為 static/src/styles.css 的新 CSS 檔案並在其中加入 @tailwind 指令。

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

下一步是啟動 Tailwind CLI 建置流程。它將掃描我們的模板文件中的類別並建立必要的 CSS。我們在這裡稍微更改了 Tailwind 網站的路徑，以便它在 src/styles.css 檔案中尋找並輸出到 dist/styles.css。

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

要嘗試一下，請使用一些 Tailwind 類別更新 base.html 範本檔案。在頂部新增載入靜態標記並連結到新樣式表非常重要。然後，我們添加基本類，使標題變為紅色，下面的文字變為藍色。

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

硬刷新主頁。

您可以看到文字更新，表示 Tailwind 已正確安裝。

觀看：css 腳本

我們已經啟動並運行了基本安裝，但您很快就會發現一些額外的功能可以顯著改善情況。

首先，我們不想記住讓 Node 執行的又大又長的指令。我們可以將其作為以「watch:css」開頭的腳本放在 package.json 檔案中。

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

在 Node 運行的終端機中，使用 Ctrl+c 停止它。輸入 npm run watch:css 它應該像以前一樣啟動。

$ npm run watch:css

刷新網頁以確保一切仍然有效。

結論

如我們所見，Tailwind 與 Django 配合得很好。如需額外的好處，請查看 django-browser-reload 以在開發中自動重新載入瀏覽器，這樣您就不必一直進行硬刷新。還有一個維護良好的第三方套件 django-tailwind，它提供了另一種將 Tailwind 與 Django 整合的方法。

以上是薑戈順風的詳細內容。更多資訊請關注PHP中文網其他相關文章！