2025-04-14-Tailwind 的顏色系統有幾個重要概念

發表於 閱讀次數：
2025-04-14-Tailwind 的顏色系統有幾個重要概念

2025-04-14-Tailwind 的顏色系統有幾個重要概念

好問題 — 不是只有少數固定顏色，但要知道 Tailwind 的顏色系統有幾個重要概念：內建色盤（多個色系 + 多個深淺階層）、任意值 (arbitrary values)、以及在 tailwind.config.js 裡自訂/擴充。下面用範例說明。

1) 內建 palette（很多色系 + 多個深淺）

像 bg-blue-500 是 Tailwind 內建的其中一個色系（blue）和一個深淺等級（500）。每個色系通常有多個階層：50,100,200,...,900（數字越小越淺，越大越深）。Tailwind 預設提供很多色系（blue, red, green, gray, slate…等）。

範例：

1
2
3
<div class="bg-blue-50">淺藍</div>
<div class="bg-blue-500">預設藍（中等）</div>
<div class="bg-blue-900">深藍</div>

2) 任意值（可以用任意 hex / rgb / rgba / CSS 變數）

如果內建色不滿足，你可以直接在 class 用方括號指定任意顏色（Tailwind JIT 支援）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- hex -->
<div class="bg-[#1da1f2]">Twitter blue</div>

<!-- rgb -->
<div class="bg-[rgb(29,161,242)]">RGB 指定</div>

<!-- rgba（含透明度）-->
<div class="bg-[rgba(29,161,242,0.5)]">半透明</div>

<!-- CSS 變數 -->
<style>
  :root { --brand: #b22222; }
</style>
<div class="bg-[var(--brand)]">使用 CSS 變數</div>

3) 使用「/」快速設定透明度（更方便）

可以把透明度放在 class 後面：bg-blue-500/50 表示 blue-500 並帶 50% alpha（或 bg-[#1da1f2]/30 也可）。

1
<div class="bg-blue-500/30">blue 30% alpha</div>

4) 在 tailwind.config.js 自訂或擴充色彩

若想把公司色命名、統一管理，可以在設定檔擴充：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#f5f7ff',
          100: '#e6efff',
          500: '#1e90ff', // brand-500
          700: '#1066d6'
        },
        accent: '#ff6b6b' // 單一色值
      }
    }
  }
}

然後在 HTML 用 bg-brand-500 或 bg-accent。

5) 小總結與建議

  • 不是只有固定幾色：Tailwind 內建很多色系與 50–900 階層；還可任意指定 hex/rgb/rgba/CSS 變數。
  • 透明度兩種做法：在顏色後加 /NN（如 /50）或用 rgba/arbitrary value。
  • 若要統一管理顏色：把常用的色放到 tailwind.config.js 的 extend.colors。

如果你有某個品牌色（hex）想轉成 Tailwind 常用的 -500 程度或想我幫你把一組公司色加到 tailwind.config.js，貼 hex 值我幫你寫好範例！