Tailwind CSS v4 實戰指南 2026

Tailwind CSS v4

🎨 什麼是 Tailwind CSS？ Tailwind CSS 是全球最流行的 Utility-First CSS 框架。v4 版本用 Rust 重寫了引擎（Oxide），引入了 CSS-first 配置體系，讓開發體驗和構建速度都實現了質的飛躍。不需要寫一行自定義 CSS，就能構建出完全定製化的現代 UI。

本文將帶你從 0 到 1 掌握 Tailwind CSS v4：

✅ v4 核心變化與新特性
✅ Vite + Tailwind v4 項目搭建
✅ CSS-first 設計系統定製
✅ 響應式佈局實戰
✅ 組件構建完整代碼
✅ 暗色模式與動畫效果
✅ 三個實戰項目案例
✅ 性能優化與最佳實踐
✅ 常見問題與解決方案

一、Tailwind CSS v4 核心變化

1.1 v4 vs v3 關鍵差異

Tailwind CSS v4 是一次架構級重寫，不是簡單的版本升級。

特性	v3	v4	影響
配置方式	`tailwind.config.js`	CSS `@theme` 指令	告別 JS 配置文件
構建引擎	JavaScript	Rust (Oxide)	速度提升 10 倍+
內容檢測	手動配置 `content`	自動檢測	零配置起步
Vite 集成	PostCSS 插件	原生 Vite 插件	更快的熱更新
顏色空間	HEX/RGB	OKLCH	更均勻的色彩感知
安裝方式	3 步配置	1 行導入	極簡上手
容器查詢	需要插件	內置支持	開箱即用
3D 變換	不支持	內置支持	`rotate-x-45` 等
自定義變體	`addVariant()`	`@variant` 指令	純 CSS 擴展

1.2 為什麼選擇 Tailwind CSS

傳統 CSS 框架（Bootstrap、Bulma）提供預定義組件，修改樣式需要覆蓋大量 CSS。Tailwind 走了另一條路——只提供原子化工具類，組合即設計。

Tailwind 的核心理念：

<!-- 傳統 CSS -->
<button class="btn btn-primary">按鈕</button>
<!-- 還需要寫 .btn .btn-primary 的 CSS -->

<!-- Tailwind CSS -->
<button class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition-colors">
  按鈕
</button>
<!-- 不需要寫任何自定義 CSS -->

優勢一覽：

優勢	說明
🔒 一致性	所有間距、顏色、字號都來自設計系統，不會出現 `margin: 13px` 這種隨意值
⚡ 開發速度	不用切換 HTML/CSS 文件，不用想類名，直接在 HTML 中寫樣式
📦 體積小	只生成用到的 CSS，生產環境通常 < 15KB
🔄 可維護	改樣式不用搜索 CSS 文件，直接改 HTML 中的類名
🎯 無命名衝突	不存在 CSS 類名衝突問題

1.3 適合與不適合的場景

適合 ✅	不太適合 ❌
新項目從零開始	已有大量自定義 CSS 的遺留項目
團隊希望統一設計規範	需要高度定製化動畫的創意網站
Vite/Vue/React 現代技術棧	純靜態 HTML 頁面（可用 CDN 但體驗打折）
需要快速迭代原型	設計師需要直接寫 CSS 的工作流
組件化開發模式	—

二、環境搭建

2.1 Vite + Tailwind v4 項目初始化

v4 的安裝比 v3 簡單得多——一行導入即可。

bash

# 1. 創建 Vite 項目
pnpm create vite my-app --template vue-ts
cd my-app
pnpm install

# 2. 安裝 Tailwind CSS v4
pnpm add tailwindcss @tailwindcss/vite

# 3. 配置 Vite 插件
# 修改 vite.config.ts

vite.config.ts：

typescript

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    vue(),
    tailwindcss(),
  ],
})

src/style.css：

css

/* 一行導入，完成！不需要 tailwind.config.js */
@import "tailwindcss";

src/main.ts：

typescript

import { createApp } from 'vue'
import App from './App.vue'
import './style.css'

createApp(App).mount('#app')

就這樣，三步完成。對比 v3 需要的 tailwind.config.js + postcss.config.js + content 路徑配置，v4 極大地簡化了上手流程。

2.2 與 v3 項目遷移

如果你有現成的 v3 項目，遷移到 v4 只需幾步：

bash

# 升級依賴
pnpm remove tailwindcss postcss autoprefixer
pnpm add tailwindcss @tailwindcss/vite

# 刪除舊配置文件
rm tailwind.config.js postcss.config.js

修改 vite.config.ts（同上），修改 CSS 入口文件：

css

/* 舊寫法 (v3) */
/* @tailwind base; */
/* @tailwind components; */
/* @tailwind utilities; */

/* 新寫法 (v4) */
@import "tailwindcss";

/* 如果有自定義配置，用 @theme 遷移 */
@theme {
  /* 舊 tailwind.config.js 中的 theme.extend 內容遷移到這裡 */
  --color-brand: #3b82f6;
  --font-display: "Inter", sans-serif;
}

2.3 VS Code 開發環境

插件	說明
Tailwind CSS IntelliSense	官方插件，提供類名自動補全、懸停預覽、Lint 檢查
Tailwind Sort	自動排序類名，保持代碼整潔
PostCSS Language Support	如果還有 PostCSS 語法需要支持

推薦 VS Code 配置（.vscode/settings.json）：

json

{
  "tailwindCSS.includeLanguages": {
    "vue": "html",
    "svelte": "html"
  },
  "tailwindCSS.experimental.classRegex": [
    "tw`([^`]*)",
    "tw\\(\"([^\"]*)\"",
    "className=\"([^\"]*)"
  ],
  "editor.quickSuggestions": {
    "strings": true
  },
  "files.associations": {
    "*.css": "tailwindcss"
  }
}

2.4 CDN 方式（快速原型）

如果只是想快速試用，不需要構建工具：

html

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold text-blue-500">Hello Tailwind v4!</h1>
</body>
</html>

⚠️ 注意： CDN 版本僅用於開發原型，生產環境請務必使用構建工具方式，以獲得 Tree Shaking 和最小化 CSS 體積。

三、CSS-first 設計系統

3.1 @theme 指令

v4 最大的變化是用 CSS 中的 @theme 指令替代了 JS 配置文件。所有設計 token 都在 CSS 中定義。

css

@import "tailwindcss";

@theme {
  /* 自定義顏色 */
  --color-brand-50: #eff6ff;
  --color-brand-100: #dbeafe;
  --color-brand-500: #3b82f6;
  --color-brand-600: #2563eb;
  --color-brand-700: #1d4ed8;
  --color-brand-900: #1e3a8a;

  /* 自定義字體 */
  --font-sans: "Inter", "Noto Sans SC", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* 自定義間距 */
  --spacing-128: 32rem;

  /* 自定義斷點 */
  --breakpoint-3xl: 1920px;

  /* 自定義動畫 */
  --animate-fade-in: fade-in 0.5s ease-out;

  @keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

定義後，Tailwind 會自動生成對應的工具類：

html

<!-- 自動可用 -->
<div class="bg-brand-500 text-white font-sans p-128 3xl:block animate-fade-in">
  自定義設計 token
</div>

3.2 顏色系統

v4 默認使用 OKLCH 色彩空間，色彩感知更均勻。

css

@theme {
  /* 使用 OKLCH 定義顏色（推薦） */
  --color-primary: oklch(0.6 0.2 250);
  --color-success: oklch(0.7 0.15 145);
  --color-warning: oklch(0.75 0.18 85);
  --color-danger: oklch(0.6 0.2 25);

  /* 也可以用 HEX/RGB */
  --color-accent: #8b5cf6;
}

默認調色板速查：

色系	關鍵值	用途
`slate`	slate-500/700/900	文字、深色背景
`gray`	gray-100/500/900	中性背景、邊框
`red`	red-500/600	錯誤、刪除
`orange`	orange-400/500	警告、高亮
`amber`	amber-400/500	警告提示
`yellow`	yellow-400	注意提示
`green`	green-500/600	成功、確認
`teal`	teal-500/600	信息提示
`blue`	blue-500/600	主色、鏈接
`indigo`	indigo-500/600	品牌主色
`purple`	purple-500/600	品牌輔色
`pink`	pink-400/500	強調裝飾

3.3 間距與排版

Tailwind 的間距系統基於 4px 基準值（1 = 0.25rem = 4px）。

類名	值	常見用途
`p-1` / `m-1`	4px	緊湊間距
`p-2` / `m-2`	8px	小間距
`p-4` / `m-4`	16px	標準間距
`p-6` / `m-6`	24px	中等間距
`p-8` / `m-8`	32px	大間距
`p-12` / `m-12`	48px	區塊間距
`p-16` / `m-16`	64px	頁面級間距
`gap-4`	16px	Flex/Grid 間距

排版工具類：

html

<!-- 字號 -->
<p class="text-xs text-sm text-base text-lg text-xl text-2xl text-3xl">
<p class="text-4xl text-5xl text-6xl text-7xl">

<!-- 字重 -->
<p class="font-thin font-light font-normal font-medium font-semibold font-bold font-extrabold">

<!-- 行高 -->
<p class="leading-none leading-tight leading-normal leading-relaxed leading-loose">

<!-- 字間距 -->
<p class="tracking-tight tracking-normal tracking-wide tracking-wider">

<!-- 文字對齊 -->
<p class="text-left text-center text-right text-justify">

3.4 響應式斷點

v4 默認斷點與 v3 一致，但可以通過 @theme 自定義：

前綴	斷點	典型設備
(無)	0px	所有設備
`sm:`	640px	大手機橫屏
`md:`	768px	平板豎屏
`lg:`	1024px	平板橫屏 / 小筆電
`xl:`	1280px	桌面顯示器
`2xl:`	1536px	大屏顯示器

css

/* 自定義添加 3xl 斷點 */
@theme {
  --breakpoint-3xl: 1920px;
}

html

<!-- 移動端 1 列，平板 2 列，桌面 3 列，大屏 4 列 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 3xl:grid-cols-4">
  ...
</div>

四、佈局實戰

4.1 Flexbox 佈局

html

<!-- 水平居中 -->
<div class="flex justify-center">
  <div class="bg-blue-500 p-4">居中</div>
</div>

<!-- 兩端對齊 -->
<div class="flex justify-between items-center">
  <div class="text-lg font-bold">Logo</div>
  <nav class="flex gap-4">
    <a href="#" class="hover:text-blue-500">首頁</a>
    <a href="#" class="hover:text-blue-500">關於</a>
    <a href="#" class="hover:text-blue-500">聯繫</a>
  </nav>
</div>

<!-- 垂直居中 -->
<div class="flex items-center min-h-screen">
  <div class="mx-auto text-center">
    <h1 class="text-4xl font-bold">垂直水平居中</h1>
  </div>
</div>

<!-- 等寬分佈 -->
<div class="flex">
  <div class="flex-1 bg-red-200 p-4">1</div>
  <div class="flex-1 bg-green-200 p-4">2</div>
  <div class="flex-1 bg-blue-200 p-4">3</div>
</div>

<!-- 換行 -->
<div class="flex flex-wrap gap-4">
  <div class="w-64 bg-gray-100 p-4">卡片 1</div>
  <div class="w-64 bg-gray-100 p-4">卡片 2</div>
  <div class="w-64 bg-gray-100 p-4">卡片 3</div>
</div>

4.2 Grid 佈局

html

<!-- 基礎網格 -->
<div class="grid grid-cols-3 gap-4">
  <div class="bg-gray-100 p-4">1</div>
  <div class="bg-gray-100 p-4">2</div>
  <div class="bg-gray-100 p-4">3</div>
</div>

<!-- 響應式網格 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
  <!-- 卡片內容 -->
</div>

<!-- 跨列 -->
<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2 bg-blue-100 p-4">佔 2 列</div>
  <div class="bg-gray-100 p-4">佔 1 列</div>
  <div class="col-span-3 bg-green-100 p-4">佔 3 列</div>
</div>

<!-- 12 列網格（類似 Bootstrap） -->
<div class="grid grid-cols-12 gap-4">
  <div class="col-span-12 md:col-span-8 bg-blue-100 p-4">主內容</div>
  <div class="col-span-12 md:col-span-4 bg-gray-100 p-4">側邊欄</div>
</div>

<!-- 自動填充 -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] gap-4">
  <!-- 自動適配寬度的卡片網格 -->
</div>

4.3 定位

html

<!-- 相對 + 絕對定位 -->
<div class="relative">
  <div class="bg-white p-4">主內容</div>
  <div class="absolute top-0 right-0 bg-red-500 text-white px-2 py-1 text-xs rounded-bl-lg">
    NEW
  </div>
</div>

<!-- 固定定位 -->
<nav class="fixed top-0 left-0 right-0 bg-white shadow-md z-50">
  <!-- 固定導航欄 -->
</nav>

<!-- 粘性定位 -->
<div class="sticky top-0 bg-white/90 backdrop-blur z-40">
  <!-- 滾動時固定的標題欄 -->
</div>

<!-- 層疊 -->
<div class="z-10">底層</div>
<div class="z-20">中層</div>
<div class="z-50">頂層</div>

4.4 容器查詢

v4 內置了容器查詢支持，不再需要插件：

html

<!-- 父容器設置 @container -->
<div class="@container">
  <!-- 子元素根據父容器寬度響應 -->
  <div class="flex flex-col @md:flex-row gap-4">
    <div class="@md:w-1/3">側邊欄</div>
    <div class="@md:w-2/3">主內容</div>
  </div>
</div>

<!-- 容器查詢斷點 -->
<!-- @sm: 24rem, @md: 28rem, @lg: 32rem, @xl: 36rem, @2xl: 42rem, @3xl: 48rem -->

💡 容器查詢 vs 媒體查詢： 媒體查詢基於視口寬度，容器查詢基於父容器寬度。組件化開發中容器查詢更靈活——同一個組件在不同位置可以自適應不同寬度。

五、組件構建

5.1 按鈕

html

<!-- 基礎按鈕 -->
<button class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition-colors">
  點擊
</button>

<!-- 變體：輪廓 -->
<button class="border-2 border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white font-medium py-2 px-4 rounded-lg transition-colors">
  輪廓
</button>

<!-- 變體：幽靈 -->
<button class="text-blue-500 hover:bg-blue-50 font-medium py-2 px-4 rounded-lg transition-colors">
  幽靈
</button>

<!-- 變體：危險 -->
<button class="bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-4 rounded-lg transition-colors">
  刪除
</button>

<!-- 尺寸 -->
<button class="text-xs px-2 py-1 rounded">超小</button>
<button class="text-sm px-3 py-1.5 rounded-md">小</button>
<button class="text-base px-4 py-2 rounded-lg">默認</button>
<button class="text-lg px-6 py-3 rounded-lg">大</button>

<!-- 帶圖標 -->
<button class="inline-flex items-center gap-2 bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition-colors">
  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
  </svg>
  添加
</button>

<!-- 禁用狀態 -->
<button disabled class="bg-gray-300 text-gray-500 font-medium py-2 px-4 rounded-lg cursor-not-allowed">
  禁用
</button>

5.2 卡片

html

<!-- 基礎卡片 -->
<div class="max-w-sm rounded-xl shadow-lg overflow-hidden bg-white">
  <img class="w-full h-48 object-cover" src="/image.jpg" alt="封面">
  <div class="p-6">
    <h3 class="text-xl font-bold text-gray-900 mb-2">卡片標題</h3>
    <p class="text-gray-600 text-sm leading-relaxed">
      這是卡片的描述文字，使用 leading-relaxed 增加行高提升可讀性。
    </p>
    <div class="mt-4 flex items-center gap-4">
      <span class="text-sm text-gray-500">2026-07-11</span>
      <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">標籤</span>
    </div>
  </div>
</div>

<!-- 懸停效果卡片 -->
<div class="group max-w-sm rounded-xl shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1 overflow-hidden bg-white cursor-pointer">
  <div class="relative overflow-hidden">
    <img class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-500" src="/image.jpg" alt="封面">
    <div class="absolute top-3 right-3 bg-red-500 text-white text-xs px-2 py-1 rounded-full">
      熱門
    </div>
  </div>
  <div class="p-6">
    <h3 class="text-lg font-bold text-gray-900 group-hover:text-blue-500 transition-colors">
      懸停看效果
    </h3>
    <p class="mt-2 text-gray-600 text-sm">鼠標懸停時卡片上浮、陰影加深、圖片放大。</p>
  </div>
</div>

5.3 導航欄

html

<!-- 響應式導航欄 -->
<nav class="bg-white border-b border-gray-100 sticky top-0 z-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between items-center h-16">
      <!-- Logo -->
      <div class="flex items-center gap-2">
        <div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center">
          <span class="text-white font-bold text-sm">T</span>
        </div>
        <span class="text-lg font-bold text-gray-900">TailwindApp</span>
      </div>

      <!-- 桌面導航 -->
      <div class="hidden md:flex items-center gap-6">
        <a href="#" class="text-gray-700 hover:text-blue-500 transition-colors text-sm font-medium">首頁</a>
        <a href="#" class="text-gray-700 hover:text-blue-500 transition-colors text-sm font-medium">產品</a>
        <a href="#" class="text-gray-700 hover:text-blue-500 transition-colors text-sm font-medium">文檔</a>
        <a href="#" class="text-gray-700 hover:text-blue-500 transition-colors text-sm font-medium">價格</a>
        <button class="bg-blue-500 hover:bg-blue-600 text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors">
          開始使用
        </button>
      </div>

      <!-- 移動端菜單按鈕 -->
      <button class="md:hidden p-2 rounded-lg hover:bg-gray-100">
        <svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
      </button>
    </div>
  </div>
</nav>

5.4 表單

html

<form class="max-w-md mx-auto space-y-6">
  <!-- 文本輸入 -->
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">用戶名</label>
    <input type="text" 
           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
           placeholder="請輸入用戶名">
  </div>

  <!-- 密碼輸入 -->
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">密碼</label>
    <input type="password" 
           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
           placeholder="請輸入密碼">
  </div>

  <!-- 下拉選擇 -->
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">角色</label>
    <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all bg-white">
      <option>管理員</option>
      <option>編輯</option>
      <option>訪客</option>
    </select>
  </div>

  <!-- 複選框 -->
  <div class="flex items-center gap-2">
    <input type="checkbox" id="remember" class="w-4 h-4 text-blue-500 rounded border-gray-300 focus:ring-blue-500">
    <label for="remember" class="text-sm text-gray-700">記住我</label>
  </div>

  <!-- 文本域 -->
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">留言</label>
    <textarea rows="4" 
              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all resize-none"
              placeholder="請輸入留言內容"></textarea>
  </div>

  <!-- 提交按鈕 -->
  <button type="submit" 
          class="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2.5 rounded-lg transition-colors">
    提交
  </button>
</form>

5.5 模態框

html

<!-- 模態框結構 -->
<div class="fixed inset-0 z-50 flex items-center justify-center">
  <!-- 遮罩 -->
  <div class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>
  
  <!-- 內容 -->
  <div class="relative bg-white rounded-2xl shadow-2xl max-w-lg w-full mx-4 overflow-hidden">
    <!-- 頭部 -->
    <div class="flex items-center justify-between p-6 border-b border-gray-100">
      <h3 class="text-lg font-bold text-gray-900">確認操作</h3>
      <button class="text-gray-400 hover:text-gray-600 p-1 rounded-lg hover:bg-gray-100 transition-colors">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
        </svg>
      </button>
    </div>
    
    <!-- 主體 -->
    <div class="p-6">
      <p class="text-gray-600 text-sm leading-relaxed">
        確定要執行此操作嗎？此操作不可撤銷，請謹慎確認。
      </p>
    </div>
    
    <!-- 底部 -->
    <div class="flex justify-end gap-3 p-6 bg-gray-50 border-t border-gray-100">
      <button class="px-4 py-2 text-gray-700 font-medium rounded-lg hover:bg-gray-200 transition-colors">
        取消
      </button>
      <button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-lg transition-colors">
        確認
      </button>
    </div>
  </div>
</div>

六、狀態與動畫

6.1 交互狀態

html

<!-- hover: 鼠標懸停 -->
<button class="bg-blue-500 hover:bg-blue-600 transition-colors">hover</button>

<!-- focus: 聚焦 -->
<input class="border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 outline-none">

<!-- active: 激活（按下） -->
<button class="bg-blue-500 active:bg-blue-700 active:scale-95 transition-all">active</button>

<!-- disabled: 禁用 -->
<button disabled class="bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed">disabled</button>

<!-- group-hover: 父元素懸停時子元素響應 -->
<div class="group cursor-pointer">
  <h3 class="group-hover:text-blue-500 transition-colors">標題</h3>
  <p class="text-gray-500 group-hover:text-gray-700 transition-colors">描述</p>
</div>

<!-- peer: 兄弟元素狀態響應 -->
<input type="checkbox" id="agree" class="peer hidden">
<label for="agree" class="cursor-pointer text-gray-500 peer-checked:text-blue-500">
  勾選後變藍
</label>

6.2 暗色模式

v4 支持兩種暗色模式策略：

css

@import "tailwindcss";

/* 方式 1：跟隨系統設置（默認） */
@custom-variant dark (&:is(.dark *));

/* 方式 2：class 策略（手動切換） */
/* 在 <html> 上加 .dark 類即可 */

html

<!-- 使用 dark: 前綴 -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <h1 class="text-2xl font-bold">自動適配暗色模式</h1>
  <p class="text-gray-600 dark:text-gray-400">切換系統主題看效果</p>
</div>

<!-- 完整暗色模式組件 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 transition-colors">
  <h3 class="text-gray-900 dark:text-white font-bold text-lg mb-2">卡片標題</h3>
  <p class="text-gray-600 dark:text-gray-300 text-sm">卡片內容在暗色模式下自動適配</p>
  <button class="mt-4 bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-500 text-white px-4 py-2 rounded-lg transition-colors">
    操作按鈕
  </button>
</div>

JavaScript 切換暗色模式：

javascript

// 暗色模式切換邏輯
function toggleDark() {
  document.documentElement.classList.toggle('dark')
}

// 讀取本地存儲
if (localStorage.theme === 'dark' || 
    (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.documentElement.classList.add('dark')
} else {
  document.documentElement.classList.remove('dark')
}

6.3 過渡動畫

html

<!-- 顏色過渡 -->
<button class="bg-blue-500 hover:bg-red-500 transition-colors duration-300">
  300ms 顏色過渡
</button>

<!-- 多屬性過渡 -->
<div class="bg-white hover:bg-blue-500 text-gray-900 hover:text-white p-4 rounded-lg transition-all duration-500">
  500ms 全屬性過渡
</div>

<!-- 變換過渡 -->
<div class="hover:scale-110 hover:rotate-3 transition-transform duration-300 cursor-pointer">
  懸停放大旋轉
</div>

<!-- 延遲 -->
<div class="hover:translate-x-4 transition-transform duration-300 delay-150">
  延遲 150ms 後移動
</div>

過渡屬性速查：

類名	說明
`transition-none`	無過渡
`transition-all`	所有屬性
`transition-colors`	color/background/border
`transition-opacity`	opacity
`transition-transform`	transform
`transition-shadow`	box-shadow
`duration-150`	150ms
`duration-300`	300ms
`duration-500`	500ms
`delay-150`	延遲 150ms
`ease-in`	加速
`ease-out`	減速
`ease-in-out`	先加速後減速

6.4 自定義動畫

css

@theme {
  --animate-fade-in: fade-in 0.5s ease-out;
  --animate-slide-up: slide-up 0.4s ease-out;
  --animate-bounce-slow: bounce-slow 2s ease-in-out infinite;
  --animate-spin-slow: spin 3s linear infinite;

  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes bounce-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
}

html

<!-- 使用自定義動畫 -->
<div class="animate-fade-in">淡入</div>
<div class="animate-slide-up">從下方滑入</div>
<div class="animate-bounce-slow">緩慢彈跳</div>
<div class="animate-spin-slow">緩慢旋轉</div>

七、實戰項目

7.1 博客首頁

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>技術博客</title>
  <link rel="stylesheet" href="/tw/style.css">
</head>
<body class="bg-gray-50 text-gray-900 min-h-screen">
  
  <!-- 導航欄 -->
  <nav class="bg-white border-b border-gray-100 sticky top-0 z-50">
    <div class="max-w-4xl mx-auto px-4 h-16 flex items-center justify-between">
      <div class="flex items-center gap-2">
        <div class="w-8 h-8 bg-indigo-500 rounded-lg"></div>
        <span class="font-bold text-lg">DevBlog</span>
      </div>
      <div class="flex items-center gap-6 text-sm">
        <a href="#" class="text-gray-700 hover:text-indigo-500">文章</a>
        <a href="#" class="text-gray-700 hover:text-indigo-500">標籤</a>
        <a href="#" class="text-gray-700 hover:text-indigo-500">關於</a>
      </div>
    </div>
  </nav>

  <!-- Hero -->
  <header class="max-w-4xl mx-auto px-4 py-16 text-center">
    <h1 class="text-4xl md:text-5xl font-bold tracking-tight">
      探索 <span class="text-indigo-500">前端技術</span> 的無限可能
    </h1>
    <p class="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
      分享 Vue、React、CSS、構建工具的實戰經驗與最佳實踐
    </p>
    <div class="mt-8 flex justify-center gap-4">
      <button class="bg-indigo-500 hover:bg-indigo-600 text-white font-medium px-6 py-2.5 rounded-lg transition-colors">
        瀏覽文章
      </button>
      <button class="border border-gray-300 hover:border-indigo-500 hover:text-indigo-500 font-medium px-6 py-2.5 rounded-lg transition-colors">
        訂閱 RSS
      </button>
    </div>
  </header>

  <!-- 文章列表 -->
  <main class="max-w-4xl mx-auto px-4 pb-16">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- 文章卡片 -->
      <article class="group bg-white rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 overflow-hidden cursor-pointer">
        <div class="aspect-video bg-gradient-to-br from-indigo-400 to-purple-500"></div>
        <div class="p-6">
          <div class="flex items-center gap-2 mb-3">
            <span class="text-xs font-medium text-indigo-500 bg-indigo-50 px-2 py-1 rounded">Vue</span>
            <span class="text-xs text-gray-500">2026-07-11</span>
          </div>
          <h2 class="text-lg font-bold group-hover:text-indigo-500 transition-colors">
            Vue 3 Composition API 最佳實踐
          </h2>
          <p class="mt-2 text-sm text-gray-600 leading-relaxed">
            深入理解 setup、ref、reactive、computed 和 watch 的使用場景...
          </p>
        </div>
      </article>

      <article class="group bg-white rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 overflow-hidden cursor-pointer">
        <div class="aspect-video bg-gradient-to-br from-blue-400 to-teal-500"></div>
        <div class="p-6">
          <div class="flex items-center gap-2 mb-3">
            <span class="text-xs font-medium text-blue-500 bg-blue-50 px-2 py-1 rounded">CSS</span>
            <span class="text-xs text-gray-500">2026-07-10</span>
          </div>
          <h2 class="text-lg font-bold group-hover:text-indigo-500 transition-colors">
            Tailwind CSS v4 實戰指南
          </h2>
          <p class="mt-2 text-sm text-gray-600 leading-relaxed">
            從零開始掌握 Tailwind v4 的 CSS-first 配置和組件構建...
          </p>
        </div>
      </article>
    </div>
  </main>

  <!-- 頁腳 -->
  <footer class="border-t border-gray-100 bg-white">
    <div class="max-w-4xl mx-auto px-4 py-8 text-center text-sm text-gray-500">
      © 2026 DevBlog. Built with Vite + Tailwind CSS v4.
    </div>
  </footer>

</body>
</html>

7.2 儀表盤佈局

html

<div class="min-h-screen bg-gray-50 flex">
  <!-- 側邊欄 -->
  <aside class="w-64 bg-gray-900 text-gray-300 hidden md:flex flex-col">
    <div class="p-6">
      <div class="flex items-center gap-2 text-white">
        <div class="w-8 h-8 bg-indigo-500 rounded-lg flex items-center justify-center font-bold">D</div>
        <span class="font-bold">Dashboard</span>
      </div>
    </div>
    <nav class="flex-1 px-3 space-y-1">
      <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg bg-indigo-500 text-white text-sm">
        📊 概覽
      </a>
      <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-800 text-sm">
        📈 分析
      </a>
      <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-800 text-sm">
        👥 用戶
      </a>
      <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-800 text-sm">
        ⚙️ 設置
      </a>
    </nav>
  </aside>

  <!-- 主內容 -->
  <main class="flex-1 p-6">
    <!-- 統計卡片 -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
      <div class="bg-white rounded-xl shadow-sm p-6">
        <p class="text-sm text-gray-500">總用戶</p>
        <p class="text-2xl font-bold text-gray-900 mt-1">12,847</p>
        <p class="text-xs text-green-500 mt-2">↑ 12.5% 較上月</p>
      </div>
      <div class="bg-white rounded-xl shadow-sm p-6">
        <p class="text-sm text-gray-500">活躍用戶</p>
        <p class="text-2xl font-bold text-gray-900 mt-1">3,294</p>
        <p class="text-xs text-green-500 mt-2">↑ 8.2% 較上月</p>
      </div>
      <div class="bg-white rounded-xl shadow-sm p-6">
        <p class="text-sm text-gray-500">收入</p>
        <p class="text-2xl font-bold text-gray-900 mt-1">¥48,290</p>
        <p class="text-xs text-red-500 mt-2">↓ 3.1% 較上月</p>
      </div>
      <div class="bg-white rounded-xl shadow-sm p-6">
        <p class="text-sm text-gray-500">轉化率</p>
        <p class="text-2xl font-bold text-gray-900 mt-1">3.47%</p>
        <p class="text-xs text-green-500 mt-2">↑ 0.8% 較上月</p>
      </div>
    </div>

    <!-- 表格 -->
    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
      <div class="px-6 py-4 border-b border-gray-100">
        <h3 class="font-bold text-gray-900">最近訂單</h3>
      </div>
      <table class="w-full">
        <thead class="bg-gray-50">
          <tr>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">訂單號</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">客戶</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">金額</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">狀態</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
          <tr class="hover:bg-gray-50">
            <td class="px-6 py-4 text-sm text-gray-900">#001</td>
            <td class="px-6 py-4 text-sm text-gray-600">張三</td>
            <td class="px-6 py-4 text-sm text-gray-900">¥299</td>
            <td class="px-6 py-4">
              <span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">已完成</span>
            </td>
          </tr>
          <tr class="hover:bg-gray-50">
            <td class="px-6 py-4 text-sm text-gray-900">#002</td>
            <td class="px-6 py-4 text-sm text-gray-600">李四</td>
            <td class="px-6 py-4 text-sm text-gray-900">¥599</td>
            <td class="px-6 py-4">
              <span class="px-2 py-1 text-xs font-medium text-yellow-700 bg-yellow-100 rounded-full">處理中</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </main>
</div>

7.3 Landing Page

html

<div class="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 text-white">
  <!-- 導航 -->
  <nav class="fixed top-0 left-0 right-0 z-50 backdrop-blur-lg bg-slate-900/50 border-b border-white/10">
    <div class="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
      <span class="font-bold text-lg">🚀 LaunchApp</span>
      <div class="flex items-center gap-6 text-sm">
        <a href="#" class="hover:text-purple-300 transition-colors">功能</a>
        <a href="#" class="hover:text-purple-300 transition-colors">價格</a>
        <a href="#" class="hover:text-purple-300 transition-colors">文檔</a>
        <button class="bg-white text-slate-900 font-medium px-4 py-2 rounded-lg hover:bg-purple-100 transition-colors">
          免費試用
        </button>
      </div>
    </div>
  </nav>

  <!-- Hero -->
  <section class="pt-32 pb-20 px-4 text-center">
    <div class="max-w-3xl mx-auto">
      <span class="inline-block px-4 py-1.5 bg-purple-500/20 text-purple-300 text-sm rounded-full mb-6">
        ✨ 全新 v4.0 發佈
      </span>
      <h1 class="text-5xl md:text-6xl font-bold tracking-tight">
        下一代<br>
        <span class="bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
          開發者工具
        </span>
      </h1>
      <p class="mt-6 text-lg text-gray-300 max-w-xl mx-auto">
        從想法到上線，只需幾分鐘。極速構建、智能部署、實時監控，一站式解決。
      </p>
      <div class="mt-10 flex flex-col sm:flex-row justify-center gap-4">
        <button class="bg-purple-500 hover:bg-purple-600 text-white font-medium px-8 py-3 rounded-xl transition-all hover:scale-105">
          立即開始
        </button>
        <button class="border border-white/20 hover:bg-white/10 text-white font-medium px-8 py-3 rounded-xl transition-colors">
          查看演示
        </button>
      </div>
    </div>
  </section>

  <!-- 特性 -->
  <section class="py-20 px-4">
    <div class="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
      <div class="bg-white/5 backdrop-blur rounded-2xl p-8 border border-white/10 hover:border-purple-500/50 transition-colors">
        <div class="w-12 h-12 bg-purple-500/20 rounded-xl flex items-center justify-center text-2xl mb-4">⚡</div>
        <h3 class="text-xl font-bold mb-2">極速構建</h3>
        <p class="text-gray-400 text-sm">Rust 引擎驅動，構建速度提升 10 倍</p>
      </div>
      <div class="bg-white/5 backdrop-blur rounded-2xl p-8 border border-white/10 hover:border-purple-500/50 transition-colors">
        <div class="w-12 h-12 bg-pink-500/20 rounded-xl flex items-center justify-center text-2xl mb-4">🔒</div>
        <h3 class="text-xl font-bold mb-2">安全可靠</h3>
        <p class="text-gray-400 text-sm">端到端加密，SOC 2 合規認證</p>
      </div>
      <div class="bg-white/5 backdrop-blur rounded-2xl p-8 border border-white/10 hover:border-purple-500/50 transition-colors">
        <div class="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center text-2xl mb-4">📊</div>
        <h3 class="text-xl font-bold mb-2">實時監控</h3>
        <p class="text-gray-400 text-sm">全鏈路可觀測，異常秒級告警</p>
      </div>
    </div>
  </section>

  <!-- CTA -->
  <section class="py-20 px-4 text-center">
    <div class="max-w-2xl mx-auto bg-gradient-to-r from-purple-500/20 to-pink-500/20 rounded-3xl p-12 border border-white/10">
      <h2 class="text-3xl font-bold mb-4">準備好開始了嗎？</h2>
      <p class="text-gray-300 mb-8">免費試用 14 天，無需信用卡</p>
      <button class="bg-white text-slate-900 font-bold px-8 py-3 rounded-xl hover:scale-105 transition-transform">
        創建賬戶
      </button>
    </div>
  </section>
</div>

八、性能優化

8.1 構建產物分析

v4 的 Oxide 引擎自動進行 Tree Shaking，只生成實際使用到的 CSS。

bash

# 構建項目
pnpm build

# 查看產物大小
ls -lh dist/assets/*.css
# 通常 10-30KB（gzip 後 3-8KB）

CSS 體積參考：

項目規模	類名數量	CSS 大小	gzip 後
小型（10 頁面）	~200	8-12 KB	3-4 KB
中型（50 頁面）	~500	15-20 KB	5-7 KB
大型（100+ 頁面）	~1000	25-35 KB	8-12 KB

8.2 優化策略

css

@import "tailwindcss";

/* 1. 按需導入核心模塊（減少基礎樣式體積） */
@layer theme, base, components, utilities;

/* 2. 使用 @source 明確指定源文件範圍 */
@source "../src/**/*.{vue,ts,tsx}";
@source "../content/**/*.md";

/* 3. 禁用不需要的前綴變體 */
@variant not-(*);

優化檢查清單：

項目	說明	優先級
使用構建工具	不要用 CDN 做生產環境	🔴
檢查 @source 範圍	避免掃描不必要的文件	🟡
使用 `@layer` 分層	控制樣式優先級	🟡
開啟 gzip/brotli	服務端壓縮	🔴
避免大量 `@apply`	`@apply` 會增加 CSS 體積	🟢
使用 `@utility` 註冊自定義類	替代 `@layer components`	🟢

8.3 @apply 使用

@apply 在 v4 中仍然支持，但建議謹慎使用：

css

@import "tailwindcss";

/* ✅ 推薦：用於真正的可複用組件類 */
@utility btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 0.15s;
}

@utility btn-primary {
  background-color: var(--color-blue-500);
  color: white;
}

@utility btn-primary:hover {
  background-color: var(--color-blue-600);
}

/* ⚠️ 謹慎使用 @apply */
.card {
  @apply bg-white rounded-xl shadow-sm p-6;
  /* 可以用，但會讓 CSS 體積變大 */
}

8.4 與 VitePress 集成

本站就是 VitePress 項目，Tailwind v4 可以完美集成：

bash

# 安裝
pnpm add tailwindcss @tailwindcss/vite

.vitepress/config.ts：

typescript

import { defineConfig } from 'vitepress'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
  },
})

.vitepress/theme/style.css：

css

@import "tailwindcss";

/* VitePress 與 Tailwind 共存的注意事項 */
/* VitePress 的默認樣式可能與 Tailwind 的 preflight 衝突 */
/* 可以禁用 preflight 或按需覆蓋 */
@layer base {
  /* 保留 VitePress 的默認 body 樣式 */
}

九、常用速查表

9.1 間距速查

前綴	屬性	示例
`p-`	padding	`p-4` = 16px 內邊距
`m-`	margin	`m-4` = 16px 外邊距
`px-`	padding-left/right	`px-4`
`py-`	padding-top/bottom	`py-4`
`mx-`	margin-left/right	`mx-auto` 水平居中
`my-`	margin-top/bottom	`my-4`
`pt/pr/pb/pl-`	單方向 padding	`pt-2`
`mt/mr/mb/ml-`	單方向 margin	`mt-4`
`gap-`	flex/grid 間距	`gap-4`
`space-x-`	子元素水平間距	`space-x-4`
`space-y-`	子元素垂直間距	`space-y-4`

9.2 Flex/Grid 速查

類名	說明
`flex`	display: flex
`inline-flex`	display: inline-flex
`grid`	display: grid
`flex-row` / `flex-col`	主軸方向
`justify-center/between/around/evenly`	主軸對齊
`items-center/start/end/stretch`	交叉軸對齊
`flex-1`	flex: 1 1 0%
`flex-wrap`	換行
`grid-cols-N`	N 列網格
`col-span-N`	跨 N 列
`gap-N`	間距

9.3 文字速查

類名	說明	示例值
`text-xs`	12px	0.75rem
`text-sm`	14px	0.875rem
`text-base`	16px	1rem
`text-lg`	18px	1.125rem
`text-xl`	20px	1.25rem
`text-2xl`	24px	1.5rem
`font-light/normal/medium/bold`	300/400/500/700	—
`text-left/center/right`	對齊	—
`truncate`	單行省略	—
`line-clamp-2/3`	多行省略	—

9.4 v4 新增工具類

類名	說明
`rotate-x-45`	3D X 軸旋轉
`rotate-y-45`	3D Y 軸旋轉
`perspective-1000`	3D 透視
`transform-3d`	啟用 3D 變換
`mask-*`	遮罩效果
`text-shadow-*`	文字陰影
`@container`	容器查詢容器
`@sm:` / `@md:` / `@lg:`	容器查詢斷點
`inset-ring-*`	內嵌環形陰影
`field-sizing-content`	表單字段自動高度

十、常見問題

Q1：類名太長怎麼辦？會不會影響可讀性？

這是 Tailwind 最常見的質疑。解決方案：

組件化拆分：將重複的類名組合抽取為 Vue/React 組件
@utility 自定義類：在 CSS 中註冊可複用的工具類
@apply 適度使用：對真正高頻的組合可以用 @apply 提取
clsx / tailwind-merge：動態拼接類名時使用工具庫

vue

<!-- Vue 組件化 -->
<template>
  <BaseButton variant="primary" size="md">點擊</BaseButton>
</template>

Q2：如何與傳統 CSS 項目混用？

v4 可以和現有 CSS 共存。Tailwind 的 preflight（基礎重置）可能影響現有樣式，可以禁用：

css

@import "tailwindcss" source(none);

/* 手動導入需要的模塊 */
@import "tailwindcss/utilities";
@import "tailwindcss/theme";
/* 不導入 tailwindcss/preflight 避免重置 */

Q3：Tailwind 有哪些推薦的組件庫？

組件庫	框架	說明
shadcn/ui	React	最流行，基於 Radix UI
shadcn-vue	Vue	shadcn/ui 的 Vue 移植
DaisyUI	通用	純 CSS 組件類
Headless UI	React/Vue	Tailwind 官方無樣式組件
Park UI	React/Vue/Solid	基於 Ark UI
Flowbite	通用	帶 JS 交互的組件

Q4：v4 還需要 PostCSS 配置嗎？

不需要。v4 使用原生 Vite 插件 @tailwindcss/vite，不再依賴 PostCSS。如果你用的是其他構建工具（Webpack、Rollup），可以使用 @tailwindcss/postcss 插件。但 Vite 用戶直接用原生插件即可，性能更好。

Q5：如何在 Vue/React 中動態拼接類名？

vue

<!-- Vue -->
<template>
  <div :class="[
    'px-4 py-2 rounded-lg font-medium transition-colors',
    variant === 'primary' ? 'bg-blue-500 text-white hover:bg-blue-600' : '',
    variant === 'danger' ? 'bg-red-500 text-white hover:bg-red-600' : '',
    { 'opacity-50 cursor-not-allowed': disabled }
  ]">
    <slot />
  </div>
</template>

jsx

// React (推薦用 clsx + tailwind-merge)
import { clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

function cn(...inputs) {
  return twMerge(clsx(inputs))
}

<button className={cn(
  'px-4 py-2 rounded-lg font-medium transition-colors',
  variant === 'primary' && 'bg-blue-500 text-white hover:bg-blue-600',
  variant === 'danger' && 'bg-red-500 text-white hover:bg-red-600',
  disabled && 'opacity-50 cursor-not-allowed'
)}>
  點擊
</button>

Q6：Tailwind v4 支持 Sass/Less 嗎？

可以共存，但不推薦混用。v4 的 @theme 和 CSS 變量已經替代了 Sass 的大部分功能（變量、嵌套、混入）。如果必須用 Sass，確保在 Tailwind 的 CSS 之前導入：

css

/* 先導入 Tailwind */
@import "tailwindcss";

/* 再寫 Sass 生成的 CSS */
@import "./custom.scss";

Q7：如何調試找不到生成的 CSS 類？

確保類名拼寫正確（用 VS Code IntelliSense 自動補全）
檢查 @source 範圍是否覆蓋了你的文件
使用瀏覽器 DevTools 檢查元素是否有對應樣式
臨時添加 @source inline("{類名}") 強制生成
查看 Tailwind 的構建日誌

Q8：v4 的 @theme 和 v3 的 tailwind.config.js 有什麼區別？

維度	v3 config.js	v4 @theme
語言	JavaScript	CSS
位置	項目根目錄	CSS 入口文件
類型檢查	需要 JSDoc	原生 CSS
熱更新	重啟服務	即時生效
擴展方式	`theme.extend`	`@theme` 嵌套
條件邏輯	支持 JS 邏輯	純聲明式

核心區別是：v4 認為 CSS 配置應該在 CSS 中，而不是 JS 中。這更符合關注點分離原則，也避免了 JS 配置文件的類型推斷問題。

總結

Tailwind CSS v4 是一次架構級的進化——Rust 引擎帶來了極致性能，CSS-first 配置簡化了開發流程，內置容器查詢和 3D 變換跟上現代 CSS 趨勢。

核心要點回顧：

極簡安裝：pnpm add tailwindcss @tailwindcss/vite + @import "tailwindcss"，三步完成
CSS-first 配置：用 @theme 替代 tailwind.config.js，所有設計 token 在 CSS 中定義
自動內容檢測：不再需要配置 content 路徑
容器查詢內置：組件級響應式佈局開箱即用
性能提升 10 倍：Rust 引擎 + Tree Shaking

延伸閱讀：

Vite 構建工具完全指南 — Tailwind v4 的最佳搭檔
ESLint + Prettier 代碼規範最佳實踐 — 配合 Tailwind 保持代碼整潔
TypeScript 高級類型與實戰技巧 — 類型安全的 Tailwind 開發
Vue 3 Composition API 最佳實踐 — Vue + Tailwind 組件開發
pnpm 包管理器使用指南 — 推薦的包管理工具
VitePress SEO 優化指南 — 本站同款技術棧

🎯 Tailwind CSS v4 用更少的配置做更多的事。如果你還在猶豫，花 10 分鐘搭建一個 Vite 項目試試——你會回不去的。

Tailwind CSS v4 實戰指南 2026 ​

一、Tailwind CSS v4 核心變化 ​

1.1 v4 vs v3 關鍵差異 ​

1.2 為什麼選擇 Tailwind CSS ​

1.3 適合與不適合的場景 ​

二、環境搭建 ​

2.1 Vite + Tailwind v4 項目初始化 ​

2.2 與 v3 項目遷移 ​

2.3 VS Code 開發環境 ​

2.4 CDN 方式（快速原型） ​

三、CSS-first 設計系統 ​

3.1 @theme 指令 ​

3.2 顏色系統 ​

3.3 間距與排版 ​

3.4 響應式斷點 ​

四、佈局實戰 ​

4.1 Flexbox 佈局 ​

4.2 Grid 佈局 ​

4.3 定位 ​

4.4 容器查詢 ​

五、組件構建 ​

5.1 按鈕 ​

5.2 卡片 ​

5.3 導航欄 ​

5.4 表單 ​

5.5 模態框 ​

六、狀態與動畫 ​

6.1 交互狀態 ​

6.2 暗色模式 ​

6.3 過渡動畫 ​

6.4 自定義動畫 ​

七、實戰項目 ​

7.1 博客首頁 ​

7.2 儀表盤佈局 ​

7.3 Landing Page ​

八、性能優化 ​

8.1 構建產物分析 ​

8.2 優化策略 ​

8.3 @apply 使用 ​

8.4 與 VitePress 集成 ​

九、常用速查表 ​

9.1 間距速查 ​

9.2 Flex/Grid 速查 ​

9.3 文字速查 ​

9.4 v4 新增工具類 ​

十、常見問題 ​

總結 ​

Tailwind CSS v4 實戰指南 2026

一、Tailwind CSS v4 核心變化

1.1 v4 vs v3 關鍵差異

1.2 為什麼選擇 Tailwind CSS

1.3 適合與不適合的場景

二、環境搭建

2.1 Vite + Tailwind v4 項目初始化

2.2 與 v3 項目遷移

2.3 VS Code 開發環境

2.4 CDN 方式（快速原型）

三、CSS-first 設計系統

3.1 @theme 指令

3.2 顏色系統

3.3 間距與排版

3.4 響應式斷點

四、佈局實戰

4.1 Flexbox 佈局

4.2 Grid 佈局

4.3 定位

4.4 容器查詢

五、組件構建

5.1 按鈕

5.2 卡片

5.3 導航欄

5.4 表單

5.5 模態框

六、狀態與動畫

6.1 交互狀態

6.2 暗色模式

6.3 過渡動畫

6.4 自定義動畫

七、實戰項目

7.1 博客首頁

7.2 儀表盤佈局

7.3 Landing Page

八、性能優化

8.1 構建產物分析

8.2 優化策略

8.3 @apply 使用

8.4 與 VitePress 集成

九、常用速查表

9.1 間距速查

9.2 Flex/Grid 速查

9.3 文字速查

9.4 v4 新增工具類

十、常見問題

總結