介紹

TailwindCSS 作為創建響應式和可自訂使用者介面 (UI) 的創新工具脫穎而出。憑藉其實用性優先的方法，它允許開發人員在不離開 HTML（或在 React 的情況下是 JSX）的情況下設計他們的應用程式。本文介紹如何將 TailwindCSS 整合到 React 專案中，探討這種組合的好處，將其與其他 CSS 方法進行比較，並提供實際範例。

為什麼將 TailwindCSS 與 React 結合使用？

TailwindCSS 與 React 一起使用時具有多種優勢：

• 開發效率：透過使用可直接應用於React元件的實用類，開發者無需編寫自訂CSS即可建立UI，顯著加快了開發流程。
• 輕鬆回應：透過內建回應類，可以輕鬆創建適應不同螢幕尺寸的設計，而無需複雜的媒體查詢。
• 自訂和設定： Tailwind 可以透過其設定檔進行高度客製化。開發人員可以調整設定以與專案的視覺標識保持一致，確保整個設計的一致性。

與其他 CSS 方法的比較

在 TailwindCSS 之前，BEM（區塊元素修飾符）和 CSS-in-JS 系統（如 Styled Components）等方法在 React 專案中很常見。雖然 BEM 需要詳細的手動類別名稱結構，但 CSS-in-JS 將樣式封裝在元件內，增加了套件大小並可能增加渲染時間。相比之下，Tailwind 提供了一個高效的中間立場：低風格開銷、快速執行和易於維護。

在 React 專案中設定 TailwindCSS

要將 TailwindCSS 整合到 React 專案中，請依照下列步驟操作：

1. 安裝與配置

首先，如果您還沒有一個新的 React 項目，請建立一個：

npx create-react-app my-tailwind-project
cd my-tailwind-project

透過npm安裝TailwindCSS：

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

此命令建立 tailwind.config.js 和 postcss.config.js 設定文件，您可以根據需要自訂它們。

2. 設定CSS

在 src/index.css 中，新增 Tailwind 導入指令：

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

3. 在 React 元件中使用 TailwindCSS

現在您可以直接在 React 元件中使用 Tailwind 類別：

function App() {
  return (
    

      

        
Hello Tailwind!
        
Você está usando TailwindCSS com React!
      
    
  );
}

export default App;

實例：個人資料卡

讓我們使用 TailwindCSS 和 React 建立一個簡單的個人資料卡：

function ProfileCard() {
  return (
    

      
      

        
João Silva
        
Desenvolvedor Front-end
        
          Conectar
        
      
    
  );
}

結論

將 TailwindCSS 整合到 React 專案中為 UI 開發提供了一種現代且高效的方法。 TailwindCSS 與 React 能夠根據您的喜好完全自訂和調整設計，並且能夠輕鬆應用響應式和高效能樣式，是一個強大的組合，可以在不影響品質或可維護性的情況下加快開發速度。在您的下一個項目中嘗試並注意差異！