房門與門鎖[ 1 / 6 ]：用 Tailwind CSS v4 打造現代感登入頁

17th鐵人賽 morden web tailwind 登入頁

阿杰

團隊夢幻公牛

2025-09-18 22:32:44

44 瀏覽

分享至

上一篇，我們將整體專案做好了初始化，TypeScript 與 ESLint 都能夠正常運作了😌。那麼接下來就要迎接新篇章 — ~~起大厝~~。不是哦不是這樣哦，我們的建案得稍微改一下流程，在起大厝之前，我們先來「安裝房門」。本篇會聊聊 Tailwind 今年的大轉變，並簡單介紹一下會使用到的函式庫套件，以及建立 Tailwind 純樣式登入頁。

Tailwind 製現代感樣本頁

本篇重點整理：

Tailwind：快速認識常見樣式工具，並比較 Tailwind 新舊版本差異 (v3 vs v4)，最後完成初始化設定
建立樣品頁：補充其他常用的 UI 工具，簡單示範 Tailwind 的語法，並實作一個小型樣品頁

Tailwind CSS

照慣例，先簡單介紹一下樣式工具，再講述 Tailwind 版本差異與初始化。

樣式工具 (Tailwind、SCSS、Bootstrap) — 建築的裝潢設計師🎨
負責決定專案「外觀」與「風格」，就像建築師打好地基後，裝潢設計師會規劃牆面顏色、家具擺設與燈光氣氛，讓房子真正「住得舒服」。
- SCSS ( SASS )：像是傳統工法，能精細客製化，但需要自己花較多時間規劃與維護。
- Bootstrap：就像買現成的傢俱套組，組合快，但外觀容易「撞款」。
- Tailwind：新世代的設計方式，提供許多現成的「設計積木」，你能快速拼湊出想要的風格，還能靈活調整。既省時又能保有獨特性，特別適合快速開發與維護。

Tailwind 新舊版本差異

Tailwind 在今年年初公布了這一次 4.0 版本，與上篇的 ESLint 一樣，優化了絕大部分初始化的設定，並與 Vite 整合良好👍。

Tailwind 3.x

需要安裝 tailwindcss、postcss、autoprefixer 等多個套件，並額外設定 postcss.config.js
在 css 檔需手動引入 @tailwind base、@tailwind components、@tailwind utilities 三個指令
以 tailwind.config.js 為主要設定檔

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: { extend: {} },
  plugins: [],
}

Tailwind 4.x

僅需安裝 tailwindcss 與 @tailwindcss/vite 兩個套件即可
不再需要 tailwind.config.js，可直接在 .css 撰寫設定

@import "tailwindcss";

@theme {
  /* 自訂主題變數 */
}

官方文檔說明：您可以直接在 CSS 檔案中匯入 Tailwind 所有的自訂配置項，而不用使用 tailwind.config.js 文件，從而在專案中減少一個需要擔心的文件

接下來就開始 Tailwind 初始化吧！

下載 tailwind 等相關套件

npm install tailwindcss @tailwindcss/vite

將 @tailwindcss/vite 加入到 vite.config.ts 裡

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
});

在 index.css 引入底下程式碼就完成了🎉

@import "tailwindcss";

來創造屬於自己的登入頁吧！

🔰本篇會是以製作樣品頁(React + Tailwind)為主，功能 / 生態系的部分會再往後的篇章慢慢說明。
首先，如果想創造與上面的登入樣本頁具有現代感的話，不仿再讓我介紹兩樣東西：

字體樣式：我這裡是使用 Google Fonts ，有眾多與語言字體可供挑選，但中文偏少
圖標樣式：我使用的是 Font Awesome ，與許多框架整合良好，但要好一點的圖標得訂閱，以年計費。

這邊的引入就不再贅述，詳情請至官方文件檔查詢😌

Tailwind 的語法相當直覺，只要有寫過 CSS，就能很快上手。它的特色在於：

語法簡短，單字即重點
Tailwind 把冗長的 CSS 壓縮成單字，讓你在 HTML / JSX 中就能直接完成樣式設定。

/* Tailwind 語法          對應的 CSS / 解釋   */
flex                |     display: flex
m-4                 |     margin: 16px
h-full              |     height: 100%
text-blue-500       |     color: #3b82f6
bg-red-500          |     background-color: #ef4444
rounded             |     border-radius: 4px /* 小型圓角 */

單位清楚，使用直觀
Tailwind 幫你定義好「常見大小與間距單位」，不用再自己算 px。

/* Tailwind 語法          對應的 CSS / 解釋   */
w-1/2               |     width: 50%
pt-4                |     padding-top: 16px
mr-2                |     margin-right: 8px
px-4                |     padding-left: 16px; padding-right: 16px /* 橫向 */
text-xl             |     font-size: 20px
rounded-lg          |     border-radius: 8px /* 中型圓角 */

響應式設計 (RWD) — md、lg、xl 等
Tailwind 內建響應式斷點，只要在 class 前加上前綴詞，就能針對不同裝置大小調整樣式。

/* Tailwind 語法          對應的 CSS / 解釋   */
md:block            |     display: block /* 在 螢幕 ≥ 768px 時執行 */
lg:text-xl          |     font-size: 20px /* 在 螢幕 ≥ 1024px 時執行 */
sm:w-full md:w-1/2  |     /* 手機：100% 寬度；平板以上：50% 寬度 */

常見實用語法
除了排版與顏色，Tailwind 也提供一堆「即用型」樣式。

/* Tailwind 語法          對應的 CSS / 解釋   */
items-center        |     align-items: center
justify-between     |     justify-content: space-between
rounded-full        |     border-radius: 999px /* 完全圓角 */
shadow-lg           |     box-shadow: ... /*大型陰影*/
hover:bg-gray-200   |     :hover { background-color: #e5e7eb; }

再來就是完成這篇的樣品頁吧！

LoginPage.tsx

import { Link } from "react-router-dom";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import "../../lib/fontawesome.ts";

export default function LoginPage() {
  return (
    <div className="h-screen flex flex-col items-center justify-center space-y-4 bg-gradient-to-bl from-primary-light to-slate-950">
      <p className="text-6xl text-white font-extrabold font-en-title drop-shadow-lg">
        Sign In
      </p>
      <div className="w-md p-8 rounded-2xl bg-gray-100 shadow-xl">
        <form className="flex flex-col space-y-6">
          {/* 使用者名稱 */}
          <div className="w-full">
            <label htmlFor="username">
              <span className="sr-only">使用者名稱</span>
              <FontAwesomeIcon
                icon="user"
                className="absolute mt-5 ml-3.5 text-xl text-gray-500"
              />
            </label>
            <input
              id="username"
              name="username"
              type="text"
              placeholder="使用者名稱"
              className="w-full py-4 pl-12 rounded-xl text-lg bg-white shadow-md focus:outline-none focus:ring-2 focus:ring-primary transition duration-200"
              required
            />
          </div>

          {/* 密碼 */}
          <div className="w-full">
            <label htmlFor="password">
              <span className="sr-only">密碼</span>
              <FontAwesomeIcon
                icon="lock"
                className="absolute mt-5 ml-3.5 text-xl text-gray-500"
              />
            </label>
            <input
              id="password"
              name="password"
              type="password"
              placeholder="密碼"
              className="w-full py-4 pl-12 rounded-xl text-lg bg-white shadow-md focus:outline-none focus:ring-2 focus:ring-primary transition duration-200"
              required
            />
          </div>

          {/* 登入按鈕 */}
          <div className="flex justify-center">
            <button
              type="submit"
              className="w-3xs py-3 rounded-xl bg-primary-dark text-white text-xl font-bold hover:bg-primary focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50 shadow-md transition duration-200"
            >
              登入
            </button>
          </div>
        </form>
      </div>
      <p className="font-bold text-white">
        沒有帳戶嗎?
        <Link to="/register" className="text-blue-300 hover:underline ml-3">
          建立一個吧！
        </Link>
      </p>
    </div>
  );
}

index.css

@import "tailwindcss";

@theme {
  --font-en-title: "Ubuntu", serif;
  --font-zh-content: "LXGW WenKai TC", sans-serif;

  --color-primary: oklch(0.715 0.143 215.221); /* cyan 500 */
  --color-primary-light: oklch(0.789 0.154 211.53); /* cyan 400 */
  --color-primary-dark: oklch(0.609 0.126 221.723); /* cyan 600 */
}

body {
  font-family: var(--font-zh-content);
}

參考資料 & 文章分享：

Tailwind 官方文檔
 iThome 鐵人賽 — 掌握 Master CSS 優化開發體驗