2025-02-06- JavaScript 系列八：第5課 ── 體重追蹤應用程式-tailwind.config.js位置

發表於 閱讀次數：
2025-02-06- JavaScript 系列八：第5課 ── 體重追蹤應用程式-tailwind.config.js位置

2025-02-06- JavaScript 系列八：第5課 ── 體重追蹤應用程式-tailwind.config.js位置

✅ 你的專案結構說明：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
AppleLilyShop/
├── index.html               ← 入口 HTML，Vite 預設找這個
├── vite.config.js           ← Vite 設定檔
├── tailwind.config.js ⬅️ 建議放這裡（與 vite.config.js 同層）
├── package.json             ← npm 套件清單
├── node_modules/            ← 套件安裝後放這裡
├── public/                  ← 靜態資源（圖片、favicon 等）
├── src/                     ← 程式碼主目錄
│   ├── main.js              ← 入口 JS
│   ├── App.vue              ← 根元件
│   ├── router/              ← 路由設定（如果有使用）
│   └── lily_learning/       ← 你放練習 app 的地方 👍
│       ├── javascript_8/    ← 可再細分
│       └── components/      ← Vue 元件（你做的小工具）
│           ├── weightTrackerApp.vue ← 體重追蹤器
│           ├── ...

✅ tailwind.config.js 擺哪裡？

👉 放在 vite.config.js 同一層（即專案根目錄），你這樣寫就對：

1
2
3
4
5
AppleLilyShop/
├── tailwind.config.js ✅
├── vite.config.js ✅
├── index.html
...

✅ 加入主題顏色步驟（簡版）：

  1. **建立/修改 tailwind.config.js**：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // tailwind.config.js
    export default {
      theme: {
        extend: {
          colors: {
            lily: {
              light: '#ead7da',
              dark: '#d4a2a7',
              chart: '#f5e5e7',
            },
          },
        },
      },
    }

  2. 在程式中使用主題顏色 class：

    1
    2
    3
    <div class="bg-lily-light">
      <button class="bg-lily-dark text-white">新增</button>
    </div>

  3. 重新啟動 Vite 開發伺服器（Tailwind 變更要重啟）：

    1
    npm run dev