2025-01-27- Tailwind CSS

發表於 閱讀次數：
2024-01-25 - JavaScript 系列八：第5課 ── 體重追蹤應用程式-步驟01

2025-01-27- Tailwind CSS

這是 Tailwind CSS 的語法，它是一種實用導向（utility-first）的 CSS 框架。

🔍 說明這段 <div class="p-4 max-w-md mx-auto"> 的意思：

類別 含義
p-4 padding 為 1rem（16px）
max-w-md 最大寬度為 “medium”，大約是 28rem（448px）
mx-auto 水平邊距自動（使元素在父容器中置中）

✅ 所以這一行的意思是：

建立一個中等寬度的容器，置中顯示，內部有四邊內距。

📌 如果你沒用 Tailwind：

如果你的專案沒設定 Tailwind CSS，那這些類別不會生效，你會看到畫面很醜或沒對齊。你有使用 Tailwind 嗎？還是要我幫你改成純 CSS？

沒問題！你可以使用 CDN 引入 Tailwind CSS，非常適合練習與快速開發。以下是步驟：

✅ 在 index.html 加入 Tailwind CDN

  1. 找到你專案的 index.html（通常在 public/index.html）

  2. 在 <head> 中加入以下這段：

1
2
<!-- Tailwind CDN -->
<script src="https://cdn.tailwindcss.com"></script>

🔍 範例 index.html（簡化版）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Weight Tracker</title>
    
    <!-- Tailwind CSS CDN 加入這一行 -->
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

🧪 加入後你可以這樣測試

1
2
3
<div class="text-red-500 font-bold text-xl">
  如果這是紅色字，代表 Tailwind 正常！
</div>