如何在 React 中使用 Tailwind CSS

Tailwind CSS 是一個實用優先（Utility-First）的 CSS 框架，提供大量的預設類別，讓開發者可以快速構建美觀且響應式的 UI，無需手寫大量自訂 CSS。

傳統的 CSS 框架，如 Bootstrap，通常會提供預設的 UI 組件，而 Tailwind CSS 則專注於提供細顆粒度的工具類別（Utility Classes），讓開發者能夠高度客製化設計。

以下是 Tailwind CSS 的基本特點：

• 無需手寫額外 CSS：所有樣式均由 HTML class 控制。

• 高度可擴展：可以透過 tailwind.config.js 來自訂樣式。

• 內建響應式設計：透過 sm:, md:, lg: 來控制不同裝置的樣式。

• 支援深色模式：可以輕鬆切換 dark: 類別來適應深色主題。

Tailwind CSS 與 React 非常相容，主要原因如下：

1. 與 JSX 語法完美搭配：在 JSX 中可以直接使用 Tailwind 類別，不需額外撰寫 CSS 檔案。

2. 更好的元件化開發：每個組件的樣式可以內嵌於 JSX 內，減少了 CSS 依賴。

3. 更快的開發速度：無需記住 class 名稱，直接使用 Tailwind 提供的工具類別。

以下是一個 React 組件使用 Tailwind CSS 的範例：

export default function Button() {
return <button className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-700">點擊我</button>;
}

這樣的方式比傳統的 CSS Modules 或 Styled Components 更加簡潔且直覺。

在 React 專案中安裝 Tailwind CSS 很簡單，只需要幾個步驟：

首先，使用 npm 安裝 Tailwind 相關套件：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

這樣會在專案中建立 tailwind.config.js 和 postcss.config.js。

安裝後，需要設定 Tailwind 來確保它適用於 React 檔案。

開啟 tailwind.config.js，修改 content 以包含你的檔案：

module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
};

這樣 Tailwind 就會在 src/ 目錄下的所有 .js、.jsx、.ts 和 .tsx 檔案中啟用。

為了讓 Tailwind CSS 正常運作，需要在專案的全域 CSS 檔案（通常是 index.css 或 globals.css）中加入以下內容：

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

這樣 Tailwind 會自動載入它的樣式庫，並應用到 React 元件中。

Tailwind CSS 提供許多佈局工具，如 flexbox 和 grid。

以下是一個使用 flexbox 的範例：

<div className="flex items-center justify-center h-screen bg-gray-100">
<h1 className="text-2xl font-bold text-gray-700">Hello Tailwind</h1>
</div>

這樣可以讓內容垂直和水平居中，並設置背景顏色。

如果使用 grid，可以這樣做：

<div className="grid grid-cols-3 gap-4">
<div className="bg-blue-500 p-4">第一格</div>
<div className="bg-red-500 p-4">第二格</div>
<div className="bg-green-500 p-4">第三格</div>
</div>

這樣可以快速建立多欄式佈局。

Tailwind CSS 提供強大的按鈕樣式控制，例如：

<button className="bg-blue-500 text-white font-bold py-2 px-4 rounded-lg hover:bg-blue-700">
點擊我
</button>

這裡的 hover:bg-blue-700 代表滑鼠懸停時改變顏色。

Tailwind 提供許多響應式類別，例如：

<p className="text-sm md:text-lg lg:text-2xl">這是一段文字</p>

這段代碼表示：

• 預設文字大小為 text-sm

• 在 md（中等裝置）上變為 text-lg

• 在 lg（大型裝置）上變為 text-2xl

這樣可以確保網站在不同裝置上有良好的可讀性。

如果 Tailwind 預設的樣式不夠用，可以在 tailwind.config.js 中進行擴展，例如：

module.exports = {
theme: {
extend: {
colors: {
brandBlue: "#1E40AF",
},
},
},
};

然後可以這樣使用：

<div className="bg-brandBlue text-white p-4">自訂顏色</div>

這樣可以確保專案的 UI 風格一致。

如果你的專案使用 CSS Modules，也可以與 Tailwind 結合，範例如下：

import styles from "./Button.module.css";

export default function Button() {
return <button className={`bg-blue-500 ${styles.customButton}`}>按鈕</button>;
}

這樣可以同時使用 Tailwind 和自訂的 CSS Modules。

Tailwind CSS 讓 React 開發更加高效，建議搭配以下方式使用：

• 與組件化開發結合，確保 UI 易於維護。

• 使用 @apply 提取重複的樣式，減少 class 名稱過長。

• 合理運用 theme.extend 來擴展 Tailwind，提升專案的一致性。

透過這些方法，開發者可以更快速地建立美觀的 UI！