React 中的 TailwindCSS 入門：完整指南-js教程-PHP中文網

Getting Started with TailwindCSS in React: A Complete Guide

TailwindCSS 與 React：完整指南

TailwindCSS 是一個實用程式優先的 CSS 框架，它提供了一組低階實用程式類別來建立自訂設計，而無需編寫自訂 CSS。由於其靈活性、可擴展性和易用性，它在 React 社群中越來越受歡迎。透過在 React 應用程式中使用 TailwindCSS，您可以直接在 JSX 中設定元件樣式，從而顯著提高開發速度和可維護性。

什麼是 TailwindCSS？

TailwindCSS 是一個實用程式優先的 CSS 框架，它允許您透過直接在 HTML 或 JSX 標籤中應用預先定義實用程式類別來設定元素樣式。與Bootstrap 等帶有預先設計的組件的傳統CSS 框架不同，Tailwind 透過提供低階實用程式類別（例如，用於填充的p-4、用於背景顏色的bg-blue-500）來為您提供更大的靈活性，您可以將這些類別組合起來創建任何您喜歡的設計。

TailwindCSS 在 React 中的優點：

高度可自訂：您可以透過自訂Tailwind的設定檔來建立自己的設計系統。
更快的開發：您可以將實用程式類別直接應用於 JSX 中的元素，而不是編寫自訂 CSS，從而加快開發過程。
小檔案大小：Tailwind 使用清除功能在生產建置過程中刪除未使用的 CSS，確保您的 CSS 檔案大小保持最小。
響應式設計：Tailwind 可以使用其內建斷點（sm、md、lg、xl）輕鬆建立響應式佈局。
無 CSS 膨脹：由於您只使用所需的類，因此項目中沒有未使用的 CSS，有助於保持項目的精簡。
一致性：使用實用程式類別可以提高整個專案的設計一致性。

使用 React 安裝 TailwindCSS

要在 React 專案中設定 TailwindCSS，請依照下列步驟操作：

建立一個新的 React 專案（如果您還沒有）：

npx create-react-app my-app
cd my-app

登入後複製

安裝 TailwindCSS：

npm install -D tailwindcss postcss autoprefixer

登入後複製

產生 Tailwind 設定檔：

npx tailwindcss init

登入後複製

這將建立一個 tailwind.config.js 檔案。

設定 Tailwind:

開啟 tailwind.config.js 檔案並配置清除選項以刪除生產中未使用的樣式。

npx create-react-app my-app
cd my-app

登入後複製

建立 Tailwind CSS 檔案:

在 src 資料夾中，建立一個名為 index.css 的新檔案（或使用現有的 CSS 檔案）並匯入 Tailwind 的基礎、元件和實用程式：

npm install -D tailwindcss postcss autoprefixer

登入後複製

將 CSS 檔案匯入到你的 React 專案:

在 src/index.js 或 src/index.tsx 中，匯入 TailwindCSS 檔案：

npx tailwindcss init

登入後複製

現在，您的 React 應用程式已準備好使用 TailwindCSS！

在 React 元件中使用 TailwindCSS

TailwindCSS 設定完成後，您就可以開始在 React 元件中使用公用程式類別。以下是如何在 React 元件中使用 Tailwind 的範例：

module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx}', // Specify paths to all your JSX files
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

登入後複製

說明：

實用類別：TailwindCSS 類別（如py-2、px-4、rounded-lg、text-white、bg-blue-500 和hide:bg-blue-700）直接應用於元素來定義他們的風格。這些類別定義填滿、背景顏色、懸停效果和文字顏色。
動態類別名稱：您可以根據組件道具有條件地套用類別。例如，如果傳遞了主要道具，按鈕將具有藍色背景和懸停效果。否則，它將具有灰色背景。

React 中使用 TailwindCSS 的響應式設計

Tailwind 透過其內建斷點可以輕鬆實現響應式設計。您可以根據螢幕尺寸直接向元素添加響應式實用程式類別。

響應式版面範例：

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

登入後複製

說明：

響應式網格：grid-cols-1 類別預設應用單列佈局，而 md:grid-cols-2 在中等尺寸以上螢幕上套用兩列佈局（md 斷點）。
填充：p-4 類別預設在所有邊添加填充，但在中等螢幕及以上螢幕上，md:p-8 應用更多填充。

TailwindCSS 設定與客製化

您可以透過自訂 tailwind.config.js 檔案來擴充 TailwindCSS。例如，如果您需要自訂顏色或間距，您可以將它們新增至配置。

import './index.css';

登入後複製

現在，您可以在組件中使用新的自訂顏色和間距：

import React from 'react';

const Button = ({ label, primary }) => {
  return (
    <button
      className={`py-2 px-4 rounded-lg text-white ${
        primary ? 'bg-blue-500 hover:bg-blue-700' : 'bg-gray-500 hover:bg-gray-700'
      }`}
    >
      {label}
    </button>
  );
};

const App = () => {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <Button label="Primary Button" primary />
      <Button label="Secondary Button" />
    </div>
  );
};

export default App;

登入後複製