當 AI 建立可使用的文字越來越可靠的時候,部落格筆記就剩下避免重複問被 AI 當作失智患者的功能。
這是為使用 Tailwind CLI 快速建立靜態 CSS 檔的基本步驟。
參考這裡。
先講注意事項事項,血淚史:
- npm 設定與初始化需助要是否在 root 權限,切換會很麻煩。
- 如果採用 SSR 在套版開始之前,記得先把 tailwindcss 的靜態 CSS 創建出來,要不也會很麻煩。
- tailwindcss 提供其他靜態檔案產生方法,我覺得 tailwindcss-cli 是最好用的,如果使用前端框架可以參考官方連結。
- 還有另外一中作法,也可以參考: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」。