Skip to content

建立 2026-09-15 更新 2026-09-15

安裝與建置

Tailwind 不是在瀏覽器裡「載入一整包 CSS」就結束。建置工具會掃描你的 HTML／元件檔，只產出有用到的 utility，所以一定要接上編譯流程。v4 官方最順的接法是 Vite plugin。

用 Vite 接上（建議）

先有一個 Vite 專案，再安裝套件：

npm create vite@latest my-project
cd my-project
npm install tailwindcss @tailwindcss/vite

在 vite.config.ts 註冊 plugin：

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

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

在 CSS 入口只需要一行：

@import "tailwindcss";

把這份 CSS 引入 HTML（Vite 專案通常是 import './style.css'），就可以開始寫 class：

<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

v4 不再需要 tailwind.config.js 的 content 陣列，也不再寫 @tailwind base; 那三行。掃描來源由工具自動處理；客製改放 CSS 的 @theme，見 主題客製。

其他接法

情境 做法
已有 PostCSS 管線 用 @tailwindcss/postcss，官方文件有 Using PostCSS
沒有 bundler、只要 CLI Tailwind CLI
課堂 demo、還沒裝 Node Play CDN 或 Tailwind Play

Play CDN 適合十分鐘示範。正式專案請走 Vite／框架官方指南，否則沒有完整的建置期最佳化，也容易和元件掃描對不起來。

和舊教學不一樣的地方

YouTube 上大量課程仍停在 v2／v3：會叫你寫 npx tailwindcss init、在 config 填 content: ["./index.html"]、CSS 裡放 @tailwind base。那些步驟對 v4 新專案是錯的。觀念（utility、響應式前綴、hover）可以看；安裝請以本頁與官方 Vite 指南為準。

建議先看的影片

官方系列第一集 Setting Up Tailwind CSS 示範的是 v2 的 PostCSS 流程。看片時對照本頁：現在改成 Vite plugin 加一行 @import "tailwindcss"，不必再管 purge 設定。

v4 的 CSS-first 與 Oxide 引擎，見 官方影音 的 Tailwind Connect 與 v4 Beta 實況。

相關資料