【Tailwind CSS】「從頭開始：逐步引入 Tailwind CSS 到你的網頁專案」

當然指令不是背的，所以第一步就是要打開Tailwind CSS的官網。

Installation - Tailwind CSS

主要的方式有CLI跟CDN，這裡使用的方式前者。

1. Install Tailwind CSS

npm install -D tailwindcss
npx tailwindcss init

2. Configure your template paths 確認路徑

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

3. Add the Tailwind directives to your CSS

新增一個主要放置CSS的檔案。這邊是

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

4. Start the Tailwind CLI build process 啟動指令

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
// 前面的路徑是第三步驟的檔案，後面路徑是輸出為至(再啟動指令後會被闖造出來的檔案)​

5. Start using Tailwind in your HTML 將第四部CSS引入HTML