個人網頁開發
EP.05

Tailwind CSS
不再寫 CSS 檔，class 就是樣式

我的個人網頁沒有任何手寫的 .css 檔案（除了全域設定），
所有樣式都寫在 className 裡面

Joseph Chen

2024
5 min read
1.2k views

傳統寫法是：在 .html 裡加 class，在 .css 裡寫對應的樣式。兩個檔案來回切換，改個顏色要找半天。

Tailwind 的做法完全不同：每個 class 都直接對應一個 CSS 屬性。不需要自己命名 class，不需要另外寫 CSS 檔案，樣式就寫在元素上。

傳統 CSS vs Tailwind
// ❌ 傳統方式：HTML + CSS 兩個檔案
// index.html
<div class="my-card">...</div>

// styles.css
.my-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

// ✅ Tailwind 方式：直接寫在元素上
<div className="bg-white rounded-2xl p-6 shadow-sm">...</div>

乍看之下 className 很長很醜，但用習慣之後你會發現：根本不需要離開這個檔案就能完成所有樣式修改。

Tailwind 的命名規律

Tailwind class 都有規律，一旦抓到模式就能猜出大部分：

Class對應的 CSS說明
text-xlfont-size: 1.25rem字體大小，還有 text-sm / text-2xl / text-5xl
font-blackfont-weight: 900字重，還有 font-bold / font-medium / font-light
text-gray-900color: #111827文字顏色，數字 100-950，越大越深
bg-whitebackground: white背景色，同樣支援色票系統
p-6padding: 1.5remp = padding，數字是 4px × 數字
px-6padding-left/right: 1.5rempx = 水平 padding，py = 垂直
mt-4margin-top: 1remm = margin，mt/mb/ml/mr/mx/my
rounded-2xlborder-radius: 1rem圓角，還有 rounded-lg / rounded-full
shadow-smbox-shadow: ...陰影，還有 shadow-md / shadow-lg / shadow-xl
w-fullwidth: 100%寬度，還有 w-1/2 / w-48 / w-auto
h-screenheight: 100vh高度
opacity-50opacity: 0.5透明度，0-100

排版：flex 和 grid

我的網頁大量使用 flex 排版。以下是最常用的 flex 組合：

flex items-center gap-3

水平排列、垂直置中、間距 12px — 最常用的排版

J

Joseph Chen

Software Engineer

bash
<div className="flex items-center gap-3">
  <Avatar />
  <div>
    <p>Joseph Chen</p>
    <p>Software Engineer</p>
  </div>
</div>
flex items-center justify-between

左右兩端對齊 — 常用在 Card Header 或 Navbar

EP.01 — Two Sum2024
grid sm:grid-cols-2 gap-4

響應式網格：手機 1 欄，sm 以上 2 欄

卡片 A
卡片 B
卡片 C
卡片 D

響應式設計：前綴修飾符

Tailwind 用前綴讓你針對不同螢幕寬度套用不同樣式。規則很簡單：沒有前綴 = 手機，sm: 以上 = 套用。

前綴觸發寬度例子
（無前綴）所有裝置text-sm → 所有裝置用小字
sm:≥ 640pxsm:text-xl → 平板以上用大字
md:≥ 768pxmd:grid-cols-3 → 中螢幕 3 欄
lg:≥ 1024pxlg:text-7xl → 大螢幕超大標題

我的首頁標題就用了響應式：手機 5xl，桌面 7xl：

app/page.tsx
<h1 className="text-5xl lg:text-7xl font-black mb-8 leading-tight">
  I think, therefore I am
</h1>
{/* 手機：56px，桌面（lg以上）：72px */}

互動狀態：hover、focus、group

hover: — 滑鼠懸停效果

bash
<div className="bg-gray-50 hover:bg-blue-50 transition-colors rounded-2xl p-6">
  {/* 預設灰底，hover 時變藍底，用 transition-colors 讓顏色平滑過渡 */}
</div>
滑鼠移到這裡看效果 →

group + group-hover: — 父子連動效果

在父元素加 group，子元素用 group-hover: 就能在 hover 父元素時改變子元素的樣式

blog/page.tsx — 實際用法
<Link href={post.href} className="group">
  <p className="text-gray-800 group-hover:text-blue-600 transition-colors">
    {post.title}
  </p>
  <ChevronRight className="text-gray-300 group-hover:text-blue-400 transition-colors" />
</Link>
{/* hover Link 時，裡面的文字和箭頭同時變色 */}

實戰：拆解一張 Blog 卡片的 className

這是我的 blog/page.tsx 裡一段實際的 className，我們來逐字拆解：

完整的卡片 className
<div className="bg-violet-50 border border-violet-100 rounded-2xl p-6 space-y-3">

{/*
  bg-violet-50      → 淡紫色背景
  border            → 加外框線
  border-violet-100 → 外框線顏色（比背景深一點）
  rounded-2xl       → 圓角 1rem
  p-6               → 四周 padding 1.5rem（24px）
  space-y-3         → 子元素之間垂直間距 0.75rem
*/}

這就是上面那段 className 的實際效果

淡紫色背景、細框線、圓角、內距、子元素間距 — 完全不需要寫任何 CSS 檔案。

✅
讀 className 的技巧：遇到看不懂的 class，在 VS Code 裡把滑鼠移到 class 上，Tailwind IntelliSense 擴充套件會顯示對應的 CSS 是什麼。這是最快的學習方式。

兩個超常用的 Class

space-y-N

讓容器內所有子元素之間有垂直間距。等同於對每個子元素加 margin-top，但不用一個個加。

bash
<div className="space-y-4">
  <Card />  {/* 間距 16px */}
  <Card />  {/* 間距 16px */}
  <Card />
</div>

max-w-3xl mx-auto

限制最大寬度並水平置中。我幾乎每篇文章都用這個，讓內容不要在寬螢幕上過度延伸，保持可讀性。

bash
<article className="max-w-3xl mx-auto px-6 py-16">
  {/* 最寬 768px，水平置中，兩側內距 */}
</article>

這篇學到什麼

🎨Tailwind = 每個 class 對應一個 CSS 屬性，直接寫在元素上，不再需要另開 .css 檔
📐p-N / m-N 是間距，text-N 是字體，bg-N 是背景，rounded-N 是圓角，shadow-N 是陰影
📱響應式：sm: md: lg: 前綴針對不同螢幕寬度，無前綴 = 手機優先（Mobile First）
✨hover: 控制懸停效果；group + group-hover: 讓父子元素連動
📦flex items-center gap-3 = 水平置中排列；max-w-3xl mx-auto = 置中容器
🔍VS Code + Tailwind IntelliSense：hover 在 class 上可以看對應的 CSS，最快的學習方式

上一篇

EP.04 — React 核心概念

Component、JSX、Props、useState

下一篇

EP.06 — HeroUI 元件庫

現成 Card、Button、Chip，快速建 UI

Web Dev
Tailwind CSS
Styling
響應式
EP.05