Tailwind CSS 是一套 Utility-First CSS，相當具有彈性，非常適合快速刻板。Tailwind CSS 的工作原理是掃描您的所有 HTML 文件、JavaScript 組件和任何其他樣式模板，生成相應的樣式，然後將它們寫入靜態 CSS 文件。把大致上 CSS 會用到的屬性都用單個 class 來表示。可以直接把對應的 class 直接加在你想要作用的 元素 上，大部分的情況下可以不需要自己動 stylesheet 的部分相當方便，可以非常迅速地把網站的各種部分建構出來，也可以很輕鬆地調整。

tailwindcss.com連結網址
https://tailwindcss.com/docs/installation

安裝與設定：

1.Tailwind CSS是通過npm安裝的，所以先要安裝node.js，然後初始化一個package.json文件，經由npm 安裝初始化Tailwind CSS，它會生成一個tailwind.config.js 文件。

npm init –y
npm install -D tailwindcss
npx tailwindcss init

2.在tailwind.config.js文件中添加配置模板文件的路徑。模板路徑是指在html文件目錄css模板放置的路徑(輸入模板的文件路徑)，經編譯後輸出成一個靜態樣式表static style sheet作為css模板使用。

在tailwind.config.js文件content:中添加主文件中css 文件放置的路徑

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

3.將Tailwind指令添加到上一步驟css模板路徑中的css 文件，(例如在src目錄中設置一個input.css模板文件)，貼上下列程式碼

基本上tailwind是經由這個文件編譯並輸出為使用的主要文件css模板，如自定義的css也放在這裡

@tailwind base;
@tailwind components;
@tailwind utilities;

4.啟動Tailwindcss，在Terminal輸入

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

註：-i ./src/input.css (輸入css文件模板放置路徑)，基本上是編譯的input.css輸出至dist/output.css(輸出文件css模板放置路徑)變成主要的css文件模板。

5.開始在您的 HTML 中使用 Tailwind

將已編譯的 CSS 文件添加到並開始使用 Tailwind 的實用程序類來設置您的內容樣式。

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