本教學示範如何在新專案中從頭開始設定 Django 和 TailwindCSS。
建立一個名為 .venv 的新虛擬環境。
然後安裝 Django 並建立一個名為 django_project 的新專案。
使用 mkdir 指令從命令列建立專案級範本目錄。
我們將在這裡儲存我們的模板，而不是在每個應用程式中。但是，我們需要透過更新 settings.py 中的 TEMPLATES 配置來告訴 Django 在哪裡可以找到它們。
建立 templates/base.html 檔案。
如果我們巧妙地使用“django_project/urls.py”，我們可以將視圖和 URL 包含在一個檔案中。在頂部導入TemplateView，然後設定一個指向模板的路徑，base.html。
使用 runserver 指令確認首頁正常運作。
Tailwind 文件有一個安裝指南，我們只需進行一些更改即可遵循。從專案目錄中開啟一個新的終端會話：我們最終需要執行兩個終端會話，一個使用我們的 Django 伺服器，另一個使用 Node。
在新的終端機視窗中，請確保您的電腦上安裝了 Node。你可以用node-v來檢查。
建立 package.json 檔案以一起使用 Node 和 Tailwind。新增 -y 標誌以對所有預設值表示“是”。
這是產生的 package.json 檔案。
透過 npm 安裝 Tailwind。
這將建立一個 node_modules 目錄。接下來建立一個 tailwind.config.js 檔案。
現在我們有了一個 tailwind.config.js 檔案。為我們的模板目錄新增路徑。
在 Django 專案中，建立一個靜態目錄和一個名為 src 的子目錄。
我們需要透過更新 STATICFILES_DIRS 配置告訴 Django 在這裡查找檔案。
然後建立一個名為 static/src/styles.css 的新 CSS 檔案並在其中加入 @tailwind 指令。
下一步是啟動 Tailwind CLI 建置流程。它將掃描我們的模板文件中的類別並建立必要的 CSS。我們在這裡稍微更改了 Tailwind 網站的路徑，以便它在 src/styles.css 檔案中尋找並輸出到 dist/styles.css。
要嘗試一下，請使用一些 Tailwind 類別更新 base.html 範本檔案。在頂部新增載入靜態標記並連結到新樣式表非常重要。然後，我們添加基本類，使標題變為紅色，下面的文字變為藍色。
硬刷新主頁。
您可以看到文字更新，表示 Tailwind 已正確安裝。
我們已經啟動並運行了基本安裝，但您很快就會發現一些額外的功能可以顯著改善情況。
首先，我們不想記住讓 Node 執行的又大又長的指令。我們可以將其作為以「watch:css」開頭的腳本放在 package.json 檔案中。
在 Node 運行的終端機中，使用 Ctrl+c 停止它。輸入 npm run watch:css 它應該像以前一樣啟動。
刷新網頁以確保一切仍然有效。
如我們所見，Tailwind 與 Django 配合得很好。如需額外的好處，請查看 django-browser-reload 以在開發中自動重新載入瀏覽器，這樣您就不必一直進行硬刷新。還有一個維護良好的第三方套件 django-tailwind，它提供了另一種將 Tailwind 與 Django 整合的方法。
以上是薑戈順風的詳細內容。更多資訊請關注PHP中文網其他相關文章！
