Tailwind CSS 入門指南：打造現代化響應式網頁

什麼是 Tailwind CSS？

Tailwind CSS 是一款 實用類別優先（Utility-First） 的 CSS 框架，透過直接在 HTML 標籤中添加 CSS 類別，來實現設計與佈局，減少撰寫自訂 CSS 的需求。

為什麼選擇 Tailwind CSS？

高效率開發：透過 CSS 類別組合，即可快速建立 UI，而無需手寫大量 CSS 樣式。
靈活的響應式設計：內建響應式類別，可輕鬆適配不同裝置尺寸。
高度可自訂：可透過 tailwind.config.js 調整佈局、顏色、字體等設計變數。
精簡最終 CSS：透過 PurgeCSS 自動移除未使用的 CSS 類別，優化效能。

如何安裝 Tailwind CSS？

1. 透過 CDN 快速引入（適用於測試）

如果只是想快速測試 Tailwind CSS，可在 HTML head 中加入以下 CDN 連結：

<!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 Demo</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 text-center p-6">
    <h1 class="text-3xl font-bold text-blue-600">Hello, Tailwind CSS!</h1>
</body>
</html>

2. 在專案中安裝 Tailwind CSS（推薦）

如果你要在 前端專案 或 React/Vue 框架中使用 Tailwind CSS，建議透過 NPM 安裝。

步驟 1：初始化專案並安裝 Tailwind CSS

mkdir my-tailwind-project && cd my-tailwind-project
npm init -y  # 初始化 Node.js 專案
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p  # 產生 Tailwind 設定檔與 PostCSS 設定檔

步驟 2：設定 Tailwind 配置

開啟 tailwind.config.js，確保 content 屬性包含專案內的 HTML、JS 或 Vue/React 組件檔案。

module.exports = {
  content: ["./*.html", "./src/**/*.{js,ts,jsx,tsx}", "./components/**/*.{vue,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

步驟 3：在 CSS 檔案中引入 Tailwind

在 styles.css 檔案中加入：

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

步驟 4：編譯 Tailwind 並啟動開發伺服器

npx tailwindcss -o output.css --watch

這樣就能開始在 HTML 或 JSX 中使用 Tailwind CSS 類別了！

Tailwind CSS 基本用法

1. 設定字體與顏色

<h1 class="text-4xl font-bold text-indigo-600">Tailwind 讓開發變得更簡單！</h1>

2. 佈局與間距

<div class="container mx-auto p-4 bg-gray-200">
  <p class="m-4 p-4 bg-white shadow-lg rounded-lg">這是一個使用 Tailwind CSS 佈局的範例</p>
</div>

3. 響應式設計

<div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5">
  <p>這個區塊會根據螢幕大小自適應寬度</p>
</div>

4. 按鈕樣式

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  按我
</button>

總結

Tailwind CSS 透過 實用類別 取代傳統 CSS 規則，讓開發者能夠更靈活、快速地建立現代化網頁。本篇文章介紹了 安裝 Tailwind CSS、基本用法 以及 響應式設計技巧，希望能幫助你更快上手！

📌 延伸閱讀