Tailwind CSS

Tailwind 是一個與眾不同的 CSS 框架。傳統的 CSS 框架如 Bootstrap 會提供按鈕、導覽列等現成的元件，但 Tailwind 提供的是一堆原子化的工具類別。簡單來說，它把所有 CSS 屬性拆解成一個個小標籤，讓你直接在 HTML 裡面組合出想要的樣子。你不需要離開 HTML 檔案去寫另外的 CSS 檔案，這大幅減少了切換視窗的時間。

工具優先的開發流程

在傳統開發中，如果你想做一個圓角按鈕，你需要幫 HTML 加上一個類別名稱，然後在 CSS 檔案裡定義背景顏色、圓角半徑與內距。在 Tailwind 中，你只需要在 HTML 的 class 屬性裡寫上 bg-blue-500 rounded px-4 py-2 等字眼。這種寫法雖然一開始會讓 HTML 看起來有點擁擠，但它保證了樣式的一致性，且因為不需要想類別名稱（例如該叫 primary-btn 還是 main-button），開發速度會變得很驚人。

為什麼開發者喜歡它

使用 Tailwind 最棒的一點是它內建了響應式設計。如果你想讓一張圖片在手機上隱藏但在電腦上顯示，只需要加上 hidden md:block 即可。此外，它內建了一套非常專業的調色盤與間距規範，即便你不是設計專業，透過這些預設值組合出來的介面通常也會非常有質感。由於它在打包時會自動刪除沒用到的程式碼，最終生成的 CSS 檔案體積通常比傳統寫法還要小。

與框架的整合

Tailwind 與 React 或 Vue 的搭配非常完美。因為這些框架本身就是以組件為核心，你可以把一長串的 Tailwind 標籤封裝在一個組件裡，這樣你只需要寫一次樣式，就能在專案中重複使用。目前 Node.js 環境下的開發工具如 Vite 都能完美支援 Tailwind，讓你在修改代碼的瞬間就能在瀏覽器看到樣式的變化。

如何把計數器按鈕用 Tailwind 美化？

我們把剛才那個素面朝天的計數器按鈕，加上 Tailwind CSS 的工具類別。你會發現不需要寫任何一行傳統的 CSS，就能讓介面變得很專業。

React 結合 Tailwind 的寫法

在 React 中，我們使用 className 屬性來加入 Tailwind 的類別。

JavaScript

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
      <p className="text-2xl font-bold text-gray-800 mb-4">目前數字：{count}</p>
      <button 
        onClick={() => setCount(count + 1)}
        className="px-6 py-2 bg-blue-500 text-white rounded-lg shadow-md hover:bg-blue-600 transition duration-300"
      >
        加 1
      </button>
    </div>
  );
}

Vue 結合 Tailwind 的寫法

Vue 的寫法同樣直觀，直接在 template 的 class 屬性中加入類別即可。

HTML

<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

<template>
  <div class="flex flex-col items-center justify-center min-h-screen bg-slate-50">
    <p class="text-3xl font-extrabold text-indigo-600 mb-6">目前數字：{{ count }}</p>
    <button 
      @click="count++"
      class="px-8 py-3 bg-indigo-500 text-white font-semibold rounded-full hover:scale-105 active:scale-95 transition-transform shadow-lg"
    >
      加 1
    </button>
  </div>
</template>

樣式類別解構說明

觀察上面的程式碼，你會看到一些常用的 Tailwind 語法：

  • 佈局控制：flex 與 items-center 讓內容居中，min-h-screen 讓背景填滿整個螢幕高度。
  • 間距與大小：px-6 代表左右內距，mb-4 代表下方外距。
  • 外觀與顏色：bg-blue-500 是藍色背景，rounded-lg 是大圓角，shadow-md 是陰影效果。
  • 互動效果：hover:bg-blue-600 讓滑鼠移上去時變色，transition 則讓變化過程有平滑的動畫感。

這種開發方式讓你不需要在 HTML 檔案與 CSS 檔案之間反覆橫跳。只要記住常用的類別名稱，開發速度會比傳統寫法快上好幾倍。

在 VS Code 裡面安裝 Tailwind 的套件，讓它自動提示這些類別名稱

在 VS Code 中開發 Tailwind CSS，最核心的工具就是官方提供的擴充功能。它能讓你在撰寫時像擁有讀心術一樣，自動補完那些細碎的類別名稱。

安裝 Tailwind CSS IntelliSense

首先，請在 VS Code 的左側選單點擊擴充功能圖示，搜尋並安裝 Tailwind CSS IntelliSense。安裝完成後，只要你在 HTML 或組件的 class 屬性中開始輸入，它就會跳出建議清單。例如輸入 flex，它會顯示這代表 display: flex;，並且還會預覽顏色與間距的大小，這對記憶類別名稱非常有幫助。

搭配 Prettier 自動排序類別

當你的類別寫得越來越長，排列順序可能會變得很亂。這時候可以安裝 Prettier – Code formatter 並搭配 Tailwind 官方的插件 prettier-plugin-tailwindcss。它會在你存檔時，自動幫你把類別按照一定的邏輯重新排序。例如，它會把佈局相關的類別放在前面，顏色與裝飾性的放在後面，讓程式碼看起來非常整齊。

檢查與調試工具

如果你不確定某個類別到底對應到什麼 CSS 屬性，只需將滑鼠懸停在該類別名稱上，VS Code 就會彈出一個小視窗顯示完整的 CSS 內容。此外，如果你寫錯了語法（例如拼錯顏色名稱），編輯器會出現紅色波浪線警告你，這能避免很多低級錯誤。

設定檔的重要性

要讓這些功能正常運作，你的專案根目錄必須要有一個 tailwind.config.js 檔案。Node.js 會讀取這個設定檔來決定你的專案有哪些自定義的顏色、字體或間距。如果你發現自動提示沒有出現，通常是因為 Node.js 還沒安裝好相關套件，或是設定檔放錯了位置。

基礎的 tailwind.config.js 設定範例，試著自定義專案的專屬顏色

這是一份基礎的 tailwind.config.js 設定檔範例。你可以透過這個檔案，定義專案專屬的品牌顏色或字體，讓 Tailwind 不再只是預設的藍色或灰色。

基礎設定檔結構

在專案根目錄建立 tailwind.config.js，內容如下：

JavaScript

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx,vue}",
  ],
  theme: {
    extend: {
      colors: {
        'brand-primary': '#1a5cff',
        'brand-dark': '#0f172a',
        'maruko-pink': '#ff85a2',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
  plugins: [],
}

設定項目的意義

content 區塊非常重要，它告訴 Tailwind 應該去哪些檔案裡面找你寫過的類別名稱。如果沒設定好，Node.js 在打包程式碼時，會以為你沒用到這些樣式，導致網頁看起來白白的。theme 底下的 extend 則是用來擴充自定義屬性的地方。例如上面設定了 maruko-pink，你就可以在 HTML 裡直接寫 text-maruko-pink 或 bg-maruko-pink。

如何套用自定義顏色

當你在設定檔加入自定義顏色後，VS Code 的 IntelliSense 套件會自動讀取並在建議清單中顯示。這在開發系列產品或維護個人品牌時非常有用，你不需要記住複雜的十六進位顏色碼，只需要記住 brand-primary 這種有意義的名字即可。

Node.js 的後台作業

每當你修改這個設定檔並存檔，Node.js 執行的開發伺服器（如 Vite）會偵測到變動，並即時重新產生對應的 CSS 內容。這就是為什麼現代前端開發體驗這麼流暢的原因：你改動設定，瀏覽器幾乎在同一秒就反應出結果。

在現有的 React 或 Vue 專案中，透過 npm 指令快速初始化這份設定檔

要在專案中啟動 Tailwind CSS，你需要用到 Node.js 的套件管理工具 npm。這幾個指令會自動幫你下載必要的檔案，並幫你把設定檔準備好。

初始化步驟

請在 VS Code 的終端機（Terminal）輸入以下指令：

Bash

# 1. 安裝 Tailwind 及其相依套件
npm install -D tailwindcss postcss autoprefixer

# 2. 產生 tailwind.config.js 與 postcss.config.js 檔案
npx tailwindcss init -p

第一行指令會把 Tailwind 安裝在你的開發環境中。第二行指令中的 -p 非常重要，它會同時幫你產生 PostCSS 的設定檔。PostCSS 就像是一個翻譯官，負責把 Tailwind 的特殊語法轉譯成所有瀏覽器都能看懂的標準 CSS。

引入 Tailwind 到專案

檔案產生後，你需要在專案的 CSS 進入點（通常是 src/index.css 或 src/main.css）加入這三行指令：

CSS

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

這三行程式碼就像是開啟開關。Node.js 在執行時看到這三行，就會把 Tailwind 全部的工具類別庫載入進來，讓你可以在 React 或 Vue 的組件裡開始使用 flex、bg-blue-500 等類別。

執行與驗證

最後，只要啟動你的開發伺服器（通常是執行 npm run dev），Node.js 就會開始監控你的程式碼。如果你在設定檔中加了自定義顏色，或是修改了 HTML 裡的類別，你會發現瀏覽器會即時更新。這種開發節奏非常快，配合 VS Code 的自動補完功能，你會感覺自己像是在玩積木一樣拼湊出網頁。

把這整套工具（Vite + React/Vue + Tailwind）一次打包成可以放上網路伺服器的靜態檔案

當你的網頁開發完成後，最終目標是讓全世界的人都能看到。這時候你需要透過 Node.js 把寫好的 React 或 Vue 原始碼「編譯」成瀏覽器真正讀得懂的 HTML、CSS 與 JavaScript 檔案。

打包專案的指令

在 VS Code 終端機輸入以下指令：

Bash

npm run build

執行這個指令後，Node.js 會啟動 Vite 或 Webpack 等打包工具。它會掃描你所有的 React/Vue 組件，找出你用到的 Tailwind 類別，然後把沒用到的樣式全部刪除（這叫作 Tree Shaking），最後在專案根目錄產生一個名為 dist（或 build）的資料夾。

dist 資料夾裡有什麼

打開 dist 資料夾，你會看到一個 index.html 以及存放 JavaScript 與 CSS 的資料夾。

  • 精簡化 (Minification)： 程式碼會被壓縮成密密麻麻的一片，刪除所有空格與換行，縮短變數名稱，以減小檔案體積。
  • 快取處理： 檔名通常會帶有一串亂碼（例如 main-a1b2c3.js），這是為了確保當你更新網頁時，使用者的瀏覽器能抓到最新的版本，而不是舊的暫存檔。

如何部署到網路伺服器

你只需要把這個 dist 資料夾裡的內容，上傳到任何支援靜態網頁的空間即可。目前最流行的自動化方案包括：

  1. Vercel / Netlify： 只要把程式碼推送到 GitHub，它們會自動幫你執行 npm run build 並把網頁跑起來。
  2. GitHub Pages： 適合個人作品集，完全免費。
  3. 自己的伺服器： 透過 Node.js 或 Apache/Nginx 伺服器來託管這些檔案。

本地預覽打包結果

在正式上傳前，建議先在本地檢查打包後的網頁是否正常。你可以執行：

Bash

npm run preview

這會啟動一個臨時伺服器，讓你讀取 dist 資料夾的內容。這比開發模式更接近使用者看到的真實樣子，特別是可以用來檢查 Tailwind 的樣式有沒有因為設定錯誤而被意外刪除。

把你的專案與 GitHub 連動，達成「只要存檔推送，網頁就自動更新」的自動化流程

要達成只要將程式碼推送到 GitHub，網頁就自動更新，我們需要建立一套自動化部署（CI/CD）流程。這聽起來很專業，但現在的工具已經把過程簡化到點幾下按鍵就能完成。

為什麼要連動 GitHub

傳統做法是每次改完程式碼都要手動執行打包，再用 FTP 上傳到伺服器，既麻煩又容易出錯。連動 GitHub 後，GitHub 就像是一個中繼站。當你執行 git push 把程式碼傳上去，像是 Vercel 或 Netlify 這樣的平台就會偵測到變動，主動接手幫你執行 Node.js 打包指令，並把結果發布到網路上。

實作步驟：以 Vercel 為例

  1. 建立 GitHub 儲存庫： 在 GitHub 上新增一個專案，並把你的 React 或 Vue 程式碼推送到上面。
  2. 連結 Vercel 帳號： 到 Vercel 官網用 GitHub 帳號登入。
  3. 匯入專案： 點擊 Import Project，選取你剛才上傳的那個儲存庫。
  4. 設定框架： Vercel 通常會自動偵測你是用 Vite、React 還是 Vue，它會預設好打包指令（例如 npm run build）。你只需要點擊 Deploy。

享受自動化的成果

部署完成後，你會得到一個網址。從這一刻起，你只要在 VS Code 修改程式碼，執行以下標準動作：

Bash

git add .
git commit -m "更新了按鈕顏色"
git push

一旦 push 成功，Vercel 就會開始跑進度條。大約一分鐘內，你的線上網址就會自動更新成最新的樣子。如果你不小心寫壞了程式碼導致打包失敗，Vercel 也會傳郵件通知你，並保留上一個正常的版本，不會讓網頁直接掛掉。

協作與預覽功能

如果你是跟朋友一起開發，當有人提交新的程式碼分支（Pull Request）時，Vercel 還會幫那個分支產生一個專屬的「預覽網址」。這讓你可以在正式合併到主程式之前，先點開網址看看效果是否符合預期。這在專業開發團隊中是標準配備，而現在你一個人就能輕鬆達成。

使用 Vercel 或 Netlify 這類現代化的雲端平台，不需要手動寫 .yaml 檔。

為什麼不需要 .yaml 檔

在過去或是在一些較為傳統的環境（例如 GitHub Actions 或 Jenkins），你需要寫一份 YAML 格式的設定檔來告訴伺服器：第一步要安裝 Node.js，第二步要跑 npm install，第三步要 npm run build。

但現在的 Vercel 或 Netlify 內建了框架偵測技術。當你把 GitHub 專案連動過去時，它一看到專案裡有 package.json 檔案，就會自動判斷出這是一個前端專案，並主動幫你跑完所有流程。這就是為什麼我前面提到的流程可以這麼簡單。

什麼時候才需要用到 .yaml

雖然目前的操作可以跳過，但在以下兩種情況，你還是會遇到 YAML 檔案：

  • GitHub Actions： 如果你想在 GitHub 上自動跑測試，或是你想把打包後的檔案傳送到你「自己買的 Linux 伺服器」而不是 Vercel，你就必須在專案目錄下的 .github/workflows/ 資料夾裡寫一份 YAML 檔。
  • Docker 部署： 如果你的專案非常複雜，需要用到 Docker 容器化技術，通常也會用到 docker-compose.yaml 來管理環境。

懶人的最佳實踐

對於個人品牌、作品集或中小型專案，我強烈建議先用 Vercel 這種免設定的方案。它把所有複雜的 YAML 設定都隱藏在後台介面中了。你只需要專注在 VS Code 裡寫好你的 React 或 Vue 程式碼，剩下的自動化工作，平台會幫你處理得妥妥當當。

Related Posts

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *