跳至主要內容

Tailwind CSS 簡介

Jia-Yin2025年3月4日大约 3 分鐘coursefrontendweb

📌 學習內容

🚀 Tailwind CSS 入門（使用 CDN）

📌 課程目標

  • 了解 Tailwind CSS 是什麼
  • 使用 CDN 快速載入 Tailwind CSS
  • 學習 Tailwind 的基本概念與實作

1️⃣ 什麼是 Tailwind CSS？

📌 Tailwind CSS 簡介

Tailwind CSS 是一款 功能導向（Utility-First） 的 CSS 框架，透過「類別（class）」來控制樣式，讓開發者更快地設計頁面。

✨ 為什麼要用 Tailwind CSS？

✅ 無需寫額外 CSS，直接用 class 調整樣式
✅ 靈活性高，不像 Bootstrap 需要遵循預設樣式
✅ 適用於開發者，與 JavaScript 框架（React, Vue）搭配良好

2️⃣ 使用 CDN 載入 Tailwind

📌 最簡單的 Tailwind 設置

你可以直接透過 CDN 方式載入 Tailwind，而無需額外安裝：

📌 範例：載入 Tailwind

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS CDN</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <h1 class="text-3xl font-bold text-blue-500 text-center mt-10">
        你好，Tailwind CSS！ 🎉
    </h1>
</body>
</html>

✅ 無需安裝，打開瀏覽器就能用！

3️⃣ 常見的 Utility Classes

Tailwind CSS 透過**類別（class）**來快速修改樣式，例如：

📌 文字樣式

<p class="text-xl font-bold text-gray-700">這是一個大標題</p>
類別功能
text-xl設定文字大小
font-bold加粗字體
text-gray-700文字顏色

📌 內外邊距（Spacing）

<div class="p-4 m-6 bg-blue-200">
    我有內距 `p-4` 和外距 `m-6`
</div>
類別功能
p-4內距（padding: 1rem）
m-6外距（margin: 1.5rem）
px-8左右內距

📌 按鈕樣式

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    點我！
</button>
類別功能
bg-blue-500設定背景顏色
hover:bg-blue-700滑鼠懸停時變色
py-2 px-4設定內距
rounded圓角按鈕

4️⃣ 版面配置與 Flexbox/Grid

📌 使用 Flexbox

<div class="flex justify-center items-center h-40 bg-gray-200">
    <p class="text-lg">我是 Flex 置中的內容</p>
</div>
類別功能
flex啟用 Flexbox
justify-center水平置中
items-center垂直置中
h-40設定高度

📌 使用 Grid

<div class="grid grid-cols-3 gap-4">
    <div class="bg-red-300 p-5">1</div>
    <div class="bg-green-300 p-5">2</div>
    <div class="bg-blue-300 p-5">3</div>
</div>
類別功能
grid啟用 Grid 佈局
grid-cols-3三欄式版面
gap-4設定格子間距

5️⃣ 實作練習：建立簡單的頁面

💡 任務：建立一個簡單的個人卡片

目標：

  • 顯示個人頭像
  • 顯示名稱、職稱
  • 按鈕（按下後變色）

📌 範例程式碼

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind Card</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex justify-center items-center h-screen bg-gray-100">

    <div class="bg-white p-6 rounded-lg shadow-lg text-center">
        <img src="https://via.placeholder.com/100" class="rounded-full mx-auto mb-4">
        <h2 class="text-2xl font-semibold">小明</h2>
        <p class="text-gray-600">前端工程師</p>
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4">
            追蹤我
        </button>
    </div>

</body>
</html>

6️⃣ 實作練習

設計一個響應式 Section：
✅ 使用 flex 或 grid 排版
✅ 在不同螢幕尺寸下自適應

進階學習資源：

實用工具：

Copyright © 2025 Jia-Yin