使用方式

1. CDN
2. npm 指令

什麼是 CDN？
內容傳遞網路（CDN）是指一組分佈在不同地理位置的伺服器，協同工作以提供網際網路內容的快速交付，直接引用 CDN 即可快速開發，但引用 CDN 的伺服器如果掛掉，會導致引用該 CDN 專案出現異常等狀況。
正式開發時不建議直接引用 CDN ，建議使用上面提到第二點 npm 指令安裝。

在 官網-升級指南 能得知 Tailwind CSS 已從 v2 版本升級 v3，載入 CDN 方式也截然不同。

透過 CDN 使用 Tailwind CSS

v2 CDN - codepen 連結

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

v3 CDN - codepen 連結

<script src="https://cdn.tailwindcss.com"></script>

要注意的是 v2 是將 CDN 透過 CSS 方式載入，v3 則是 script，由於 v3 優化 v2 許多地方。
詳細資訊可以到 官網-升級指南 查閱，本次會以 v3 為介紹主軸。

透過 VScode npm 使用 Tailwind CSS

1. 建立資料夾
   
2. 打開終端機輸入 npm install -D tailwindcss
   這時候會產生 node_modules 資料夾 及 package-lock.json 檔案。
   
3. 終端機輸入 npx tailwindcss init
   這時候會產生 tailwind.config.js。
   
4. 建立 HTML 及 CSS 檔案，建立兩個 CSS 是因為一個要做為輸入來源，一個要做為輸出來源，因習慣用 SCSS，所以這裡輸入來源是建立 .scss （同理 .css）；輸出來源都是 .css ，因為瀏覽器只看得懂 CSS ，這裡很重要哦!請大家務必注意。
   
5. 接著打開輸入來源 CSS 或 SCSS 檔案，將 Tailwind CSS 指令添加到自己的 CSS 。
   
6. 接著輸入 npx tailwindcss -i { 輸入來源的 css 或 scss } -o { 輸出來源的 css } --watch
   以上面為例 npx tailwindcss -i ./tailwind.scss -o ./tailwind.css --watch
7. 將 Tailwind CSS 產生的 CSS 加到 HTML，紅框部分要注意引入的 CSS 為輸出來源的 CSS 哦!!!
   
8. 在文件中添加所有模板文件的路徑到 tailwind.config.js，紅框部分要注意是文件路徑，會依照建立檔案位置不同而有差異，以上面為例。
   
9. 確認 Tailwind CSS 是否成功使用，執行 HTML 按下 F12 若有出現輸出來源的 CSS 表示成功囉!
   

補充：
每次構建 Tailwind CSS 都要執行 npx tailwindcss -i ./tailwind.scss -o ./tailwind.css --watch，覺得特別麻煩，我們可以終端機輸入 npm init --yes，這時候會產生 package.json。

將 tailwindcss -i ./tailwind.scss -o ./tailwind.css --watch 以 watch 指令代替（命名無限制），之後只需要在終端機輸入 npm run watch 即可構建。

本日重點

1. 採用 CDN 方式載入能使我們快速開發，但遇到 CDN 伺服器掛點時，專案會出狀況，建議使用 npm 指令安裝。
2. 請大家實際操作使用 npm 指令安裝 Tailwind CSS 並查看是否正常運行。

參考

• Tailwind CSS - 安裝
• Tailwind CSS - 升級指南
• Tailwind CSS 官網