本教學示範如何在新專案中從頭開始設定 Django 和 TailwindCSS。
建立一個名為 .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>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="{% static 'dist/styles.css' %}" rel="stylesheet">
<h1 class="text-red-600">Hello, World</h1>
<p class="text-blue-600">More text</p>
硬刷新主頁。
您可以看到文字更新，表示 Tailwind 已正確安裝。
我們已經啟動並運行了基本安裝，但您很快就會發現一些額外的功能可以顯著改善情況。
首先，我們不想記住讓 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中文網其他相關文章！
