AI Skills
tailwind-css-patterns

tailwind-css-patterns

熱門

提供全面的 Tailwind CSS 工具優先樣式模式，包括響應式設計、佈局工具、flexbox、網格、間距、排版、顏色及現代 CSS 最佳實踐。適用於為 React/Vue/Svelte 元件添加樣式、建立響應式佈局、實作設計系統或最佳化 CSS 工作流程。

311星標
36分支
更新於 2026/6/22
獲取技能源代碼

相關技能

frontend-design4.5萬implementing-agent-modes3.7萬javascript-testing-patterns3.8萬
SKILL.md
唯讀
名稱
tailwind-css-patterns
描述

提供全面的 Tailwind CSS 工具優先樣式模式，包括響應式設計、佈局工具、flexbox、網格、間距、排版、顏色及現代 CSS 最佳實踐。適用於為 React/Vue/Svelte 元件添加樣式、建立響應式佈局、實作設計系統或最佳化 CSS 工作流程。

Tailwind CSS 開發模式

使用 Tailwind CSS 工具優先框架建立現代、響應式使用者介面的專家指南。涵蓋 v4.1+ 功能，包括 CSS 優先配置、自訂工具及增強的開發者體驗。

概述

提供使用 Tailwind CSS v4.1+ 建立響應式、無障礙 UI 的可行模式。涵蓋工具組合、深色模式、元件模式及效能最佳化。

使用時機

  • 為 React/Vue/Svelte 元件添加樣式
  • 建立響應式佈局和網格
  • 實作設計系統
  • 加入深色模式支援
  • 最佳化 CSS 工作流程

快速參考

響應式斷點

前綴 最小寬度 說明
sm: 640px 小螢幕
md: 768px 平板
lg: 1024px 桌上型電腦
xl: 1280px 大螢幕
2xl: 1536px 超大螢幕

常見模式

<!-- 置中內容 -->
<div class="flex items-center justify-center min-h-screen">
  內容
</div>

<!-- 響應式網格 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <!-- 項目 -->
</div>

<!-- 卡片元件 -->
<div class="bg-white rounded-lg shadow-lg p-6">
  <h3 class="text-xl font-bold">標題</h3>
  <p class="text-gray-600">描述</p>
</div>

指示

  1. 從行動優先開始：為行動裝置撰寫基本樣式，為較大螢幕加入響應式前綴（sm:、md:、lg:）
  2. 使用設計 Token：利用 Tailwind 的間距、顏色和排版比例
  3. 組合工具：結合多個工具以實現複雜樣式
  4. 提取元件：為重複模式建立可重複使用的元件類別
  5. 配置主題：在 tailwind.config.js 或使用 @theme 自訂設計 Token
  6. 驗證變更：使用 DevTools 響應式模式在每個斷點測試。提交前檢查視覺回歸和無障礙問題。

範例

響應式卡片元件

function ProductCard({ product }: { product: Product }) {
  return (
    <div className="bg-white rounded-lg shadow-lg overflow-hidden sm:flex">
      <img className="h-48 w-full object-cover sm:h-auto sm:w-48" src={product.image} />
      <div className="p-6">
        <h3 className="text-lg font-semibold">{product.name}</h3>
        <button className="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
          加入購物車
        </button>
      </div>
    </div>
  );
}

深色模式切換

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  <h1 class="dark:text-white">標題</h1>
</div>

表單輸入

<input
  class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
  placeholder="you@example.com"
/>

最佳實踐

  1. 一致的間距：使用 Tailwind 的間距比例（4、8、12、16 等）
  2. 顏色調色盤：堅持使用 Tailwind 的顏色系統以保持一致性
  3. 元件提取：將重複模式提取為可重複使用的元件
  4. 工具組合：優先使用工具類別而非 @apply 以利維護
  5. 語意化 HTML：使用適當的 HTML 元素搭配 Tailwind 類別
  6. 效能：確保內容路徑包含所有模板檔案以最佳化清除
  7. 無障礙性：包含焦點樣式、ARIA 標籤，並尊重使用者偏好（減少動畫）

疑難排解

類別未生效

  • 檢查內容路徑：確保所有模板檔案已包含在配置的 content: [] 中
  • 驗證建置：執行 npm run build 重新產生清除後的 CSS
  • 開發模式：使用 npx tailwindcss -o 搭配 --watch 旗標以即時更新

響應式樣式未生效

  • 順序很重要：響應式前綴必須在非響應式之前（例如 md:flex 而非 flex md:flex）
  • 檢查斷點值：確認斷點符合您的設計需求
  • DevTools：使用瀏覽器 DevTools 響應式模式在每個斷點測試

深色模式問題

  • 驗證配置：確保 darkMode: 'class' 或 'media' 設定正確
  • 切換實作：使用 document.documentElement.classList.toggle('dark') 實現類別策略
  • 初始閃爍：在 body 渲染前將 dark 類別加入 <html>

限制與警告

  • 類別過多：過長的類別字串降低可讀性；應提取為元件
  • 內容路徑：配置錯誤的路徑會導致類別在生產環境中被清除
  • 任意值：謹慎使用；優先使用設計 Token 以保持一致性
  • 特異性問題：避免在複雜選擇器中使用 @apply
  • 深色模式：需要正確配置（class 或 media 策略）
  • 瀏覽器支援：查閱 Tailwind 文件以了解相容性說明

參考資料

外部資源