安裝
Tailwind CSS 的運作方式是掃描你所有的 HTML 檔案、JavaScript 元件和其他任何範本中的類別名稱,產生對應的樣式,然後將它們寫入一個靜態 CSS 檔案。
它快速、靈活且可靠——零執行時期開銷。
從頭開始使用 Tailwind CSS 最簡單、最快速的方式是使用 Tailwind CLI 工具。如果你想在不安裝 Node.js 的情況下使用它,CLI 也可作為 獨立執行檔使用。
透過 npm 安裝 tailwindcss 和 @tailwindcss/cli。
npm install tailwindcss @tailwindcss/cli將 @import "tailwindcss"; 匯入語句加入你的主要 CSS 檔案。
@import "tailwindcss";執行 CLI 工具來掃描你的原始檔中的類別並建置你的 CSS。
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch將你編譯後的 CSS 檔案加入 <head>,然後開始使用 Tailwind 的通用類別來設定內容樣式。
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./output.css" rel="stylesheet"></head><body> <h1 class="text-3xl font-bold underline"> Hello world! </h1></body></html>