Tailwind CSS 色彩系統完整指南

Tailwind 調色盤結構

Tailwind CSS 內建 22 種色系，每種有 11 個色階（50, 100, 200, ..., 900, 950）：

命名規則：{色系}-{色階}，例如 blue-500、red-200、gray-900。

22 種內建色系

slate, gray, zinc, neutral, stone（灰色系）

red, orange, amber, yellow（暖色系）

lime, green, emerald, teal（綠色系）

cyan, sky, blue, indigo（藍色系）

violet, purple, fuchsia, pink, rose（紫粉色系）

在 HTML 中使用

<!-- 背景色 -->
<div class="bg-blue-500">藍色背景</div>

<!-- 文字色 -->
<p class="text-gray-700">深灰文字</p>

<!-- 邊框色 -->
<div class="border border-red-300">紅色邊框</div>

<!-- 懸停效果 -->
<button class="bg-green-500 hover:bg-green-600">按鈕</button>

如何選擇品牌色？

自訂色彩

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          500: '#2596be',
          900: '#0c4a6e',
        }
      }
    }
  }
}

深色模式

Tailwind 的深色模式只需加上 dark: 前綴：

<div class="bg-white dark:bg-gray-900">
  <p class="text-gray-900 dark:text-gray-100">
    自動適應深色模式
  </p>
</div>

建議：亮色模式用 50-400 色階做背景、600-900 做文字；深色模式反過來。