我們都非常喜歡 TailwindCSS。即使你從未嘗試過，你也聽說過它。但你可能不是一個很擅長 JavaScript 的開發人員，是以在你的項目中設定它可能會變得相當麻煩。
你可能甚至不知道 npm、npx 或 JavaScript 的各種指令是做什麼的。或者你嘗試按照 tailwind 的安裝指南一步一步執行，結果在你的項目中産生了你不了解的外星檔案。
老實說，我曾經也處于這種情況，陷入了 JavaScript 的混亂中，這确實給我的項目帶來了很多頭疼，我也很難了解我的項目發生了什麼。
在本文中，我為您提供一個解決方案，即消除在非 JavaScript 項目中設定 Tailwind 的麻煩。
介紹 tailwindpie
tailwindpie 是一個 pip 包，它自動安裝和配置 tailwindCSS 在任何項目中。它主要圍繞 Python 項目的思路，但它可以用來自動安裝和設定 tailwind，即使在 JavaScript 項目中。
tailwindpie 的想法在于幫助我們這些 Python 開發人員少關注一些 JavaScript 的噪音，隻需要運作一個簡單的指令，你就可以在你的項目中設定 tailwind。
我嘗試使用 tailwindpie 自動化另一件事情是将所有不必要的 JavaScript 檔案添加到 .gitignore 中，這樣你的項目中就不會有這些噪音。
如何使用 tailwindpie
- 要求
因為 TailwindCSS 依賴于 node 和其他東西，是以你需要安裝以下内容：
- Nodejs
- npm - 附帶于 node，是以不用擔心。
- 安裝
要在您的機器上安裝 tailwindpie：
pip install tailwindpie 在您的項目目錄中，運作：
$ tailwindpie config 在建立的 tailwind.config.js 檔案中，将其替換為包含所有 HTML 檔案的檔案夾。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./folder that contains your html/**/.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}; 使用你想要存儲生成的 CSS 的位置更新 package.json：
"css": "npx tailwindcss -i ./input.css -o .STATIC_CSS_FOLDER/tailwind.css --watch" 注意：確定檔案夾已建立！
在你的 HTML 中，添加 CSS 的路徑。
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/tailwind.css')}}" /> 在這種情況下，我們将它用于 Flask 項目中的 base.html 檔案中！
- 建構 CSS
一旦你正确地設定了所有這些，你就可以建構 CSS。
$ tailwindpie build 這些指令将繼續運作并跟蹤您的 HTML 中的更改并重新建構 CSS。
- 為什麼？
在 tailwindCSS 的初始建構中，并不是所有的類都被建立并寫入到“tailwind.css”檔案中。我的意思是這沒有任何意義，Tailwind 中有成千上萬的類可用，而且這甚至可以進一步擴充。
這就是為什麼 Tailwind 跟蹤您的檔案中的更改并僅将您在項目中使用的類添加到 CSS 檔案中的原因。
結束時，你可以使用 Ctrl + C 停止建構指令。
讓 Tailwind 的魔法開始。
在 Flask 項目中使用 Tailwindpie
現在我将在 Flask 項目中示範如何使用 tailwindpie，這将非常快速簡單。
- 開始一個 Flask 項目
- 配置 tailwind
- 編輯 base.html 檔案，添加 tailwind.css 的連結
- 使用 tailwindpie 自動化建構 tailwind.css
以下是詳細步驟：
- 開始 Flask 項目
現在我們可以很快地建立以下項目結構：
在app.py界面輸入以下代碼：
from flask import Flask, render_template
app = Flask(name)
@app.route('/')
def index():
return render_template('index.html')
if name == 'main':
app.run(debug=True)
選擇index.html
是以，現在我們可以通過運作指令來為項目設定 TailwindCSS：
- 配置 tailwind
在上面的步驟中，我們已經安裝了 tailwindpie。現在，我們需要在我們的項目中運作 tailwindpie config 指令，這将建立一個 tailwind.config.js 檔案。
在 tailwind.config.js 檔案中，将 content 替換為包含您的 HTML 檔案的檔案夾。如果您的 HTML 檔案存儲在 templates 檔案夾中，則将其替換為：
content: ["./templates/**/.html"],
将生成的 CSS 檔案的位置更新為您想要存儲它的位置。在這裡，我們将其存儲在 static/css/tailwind.css 檔案中。
"css": "npx tailwindcss -i ./input.css -o ./static/css/tailwind.css --watch"
注意：在此之前，請確定 static/css 檔案夾已建立。
- 編輯 base.html 檔案，添加 tailwind.css 的連結
在 package.json 檔案中：
然後是 tailwind.config.js 檔案：
在 base.html 檔案中，添加一個連結标記，指向 tailwind.css 檔案。在這裡，我們使用 Flask 的 url_for() 函數來生成連結。
您可以在需要的任何 HTML 檔案中重複此步驟。最後，編寫一些類：
- 使用 tailwindpie 自動化建構 tailwind.css
現在我們已經配置了 tailwind，并将其連結到我們的 HTML 檔案中，我們需要建構 tailwind.css 檔案。為此，請在指令行中運作以下指令：
tailwindpie build 當我們運作它時，會看到這樣的輸出！
這将自動監視您的檔案更改并重新建構 tailwind.css 檔案。如果你的 Flask 伺服器已經啟動并運作，我們就可以在浏覽器中檢視我們的更改。
現在，您已經成功地在 Flask 項目中設定了 TailwindCSS，而無需手動處理任何 JavaScript 或 CSS 檔案。
結論
tailwindpie 是一個非常有用的工具，它可以自動安裝和配置 TailwindCSS。使用 tailwindpie，您可以輕松地為 Python 項目設定 TailwindCSS，而不需要處理 JavaScript 的複雜性。除此之外，您還可以使用 VSCode 的 TailwindCSS 智能感覺擴充，以使開發工作更加輕松。
跟一線大廠架構師學python
《Python Tricks》專欄是我最近在寫的一本針對Python開發人員的實用程式設計指南，涵蓋了Python中最強大和有用的特性和技巧。從基礎知識入手，深入介紹函數式程式設計、面向對象程式設計、并發程式設計、網絡程式設計、Web開發、資料處理和機器學習等内容。透徹解析Python語言特性，提供實踐案例和示例代碼，幫助您優雅解決各種問題。
如果您對python asyncio異步程式設計模型感興趣，可以關注我的《python asyncio從入門到精通》專欄。