當 AI 建立可使用的文字越來越可靠的時候，部落格筆記就剩下避免重複問被 AI 當作失智患者的功能。

這是為使用 Tailwind CLI 快速建立靜態 CSS 檔的基本步驟。

參考這裡。

先講注意事項事項，血淚史：

1. npm 設定與初始化需助要是否在 root 權限，切換會很麻煩。
2. 如果採用 SSR 在套版開始之前，記得先把 tailwindcss 的靜態 CSS 創建出來，要不也會很麻煩。
3. tailwindcss 提供其他靜態檔案產生方法，我覺得 tailwindcss-cli 是最好用的，如果使用前端框架可以參考官方連結。
4. 還有另外一中作法，也可以參考：https://tailwindcss.com/blog/standalone-cli

—-
1. 初始化專案 & 安裝套件

npm init -y
npm install tailwindcss @tailwindcss/cli

這會在專案中安裝 Tailwind CSS 與其 CLI 工具 

2.  建立輸入 CSS 檔

在專案內建立檔案 src/input.css，並加入：

@import "tailwindcss";

這行指令會載入 Tailwind 的所有基礎、組件與工具類樣式 

3.  執行 CLI 產出靜態檔

執行下列指令，Tailwind 會掃描你所有的原始檔中的 class，並輸出到指定的 CSS 檔：

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

-i：指定輸入檔
-o：指定輸出檔 (建議放到 dist/ 或 public/ 等靜態資源資料夾)
–watch：開啟檔案變動監看，自動重建

4. 在 HTML 中引入已編譯的 CSS

如果沒有 input.css 或是不想整合在一起：

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

最後，在你的 HTML 中加入：

<link href="./dist/output.css" rel="stylesheet">

即可在標記中使用所有 Tailwind 的 utility classes 

⸻

備註：
• 若不需要即時監看，可將 –watch 拿掉，做一次性建置。
• 若希望調整預設設定（如自訂斷點、色票等），可執行 npx tailwindcss init 產生 tailwind.config.cjs 後再修改。
• CLI 也提供獨立執行檔版本，無需 Node.js 環境，詳見官方文件「standalone executable」。