安裝

開始使用 Tailwind CSS

Tailwind CSS 的運作方式是掃描你所有的 HTML 檔案、JavaScript 元件和其他任何範本中的類別名稱,產生對應的樣式,然後將它們寫入一個靜態 CSS 檔案。

它快速、靈活且可靠——零執行時期開銷。

安裝 Tailwind CLI

從頭開始使用 Tailwind CSS 最簡單、最快速的方式是使用 Tailwind CLI 工具。如果你想在不安裝 Node.js 的情況下使用它,CLI 也可作為 獨立執行檔使用。

01

安裝 Tailwind CSS

透過 npm 安裝 tailwindcss@tailwindcss/cli

Terminal
npm install tailwindcss @tailwindcss/cli
02

在你的 CSS 中匯入 Tailwind

@import "tailwindcss"; 匯入語句加入你的主要 CSS 檔案。

src/input.css
@import "tailwindcss";
03

啟動 Tailwind CLI 建置流程

執行 CLI 工具來掃描你的原始檔中的類別並建置你的 CSS。

Terminal
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch
04

開始在 HTML 中使用 Tailwind

將你編譯後的 CSS 檔案加入 <head>,然後開始使用 Tailwind 的通用類別來設定內容樣式。

src/index.html
<!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>
Copyright © 2026 Tailwind Labs Inc.·商標政策(Brand)