本教學示範如何在新專案中從頭開始設定 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中文網其他相關文章!