Tailwind CSS v3 安裝 (Vite + React)

設定 Tailwind 與 React 專案（使用 Vite）

步驟 1：初始化專案

1. 建立 Vite 專案：
   npm create vite@latest 專案名稱 -- --template react

2. 進入專案目錄：
   cd 專案名稱

3. 安裝 Tailwind CSS 和其他相關依賴:

   npm install -D tailwindcss postcss autoprefixer //安裝所需的依賴項
   npx tailwindcss init -p  //初始化 Tailwind 的配置檔案
   

4. Tailwind 的配置檔案已經生成
   //Created Tailwind CSS config file: tailwind.config.js
   //Created PostCSS config file: postcss.config.js

步驟 2：更新配置檔案

1. 更新 tailwind.config.js：
   告訴 Tailwind CSS 的工具去掃描哪些檔案，尋找它應該處理的 class 名稱。這部分設定了兩個路徑：
   1. ./index.html : 代表專案根目錄下的 index.html 檔案。
   2. ./src/**/*.{js,ts,jsx,tsx} : 代表 src 資料夾中所有的 JavaScript、TypeScript，以及 React（JSX 和 TSX）檔案。

//tailwind.config.js 
/** @type {import('tailwindcss').Config} */ 
export default {
  content: [
    "./index.html",✨新增
    "./src/**/*.{js,ts,jsx,tsx}",✨新增
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

1. 設定全域樣式
   src/index.css，刪除所有預設內容，添加以下 Tailwind 指令：

//src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;