作者：陳俊佑 / 臺灣大學計算機及資訊網路中心程式設計組資訊工程師
學Tailwind CSS像做披薩，配料隨心選，放上鳳梨更可以烤出獨一無二的風味！
前言
大家好，我是富田町47番地的社畜工程師柚子哥，第一篇的大致講解如何安裝Tailwind CSS以及啟動build，這一篇我們就來講Tailwind CSS我最喜歡的顏色命名系統來規劃顏色的使用，以及黑暗模式。
系統化的顏色命名
Tailwind CSS 使用統一的命名規則來組織顏色，通常由顏色名稱和強度級別組成，另外還有透明度可以加上去。
內建預設的顏色就非常多總有Slate、Gray、Zinc、Neutral、Stone、Red、Orange、Amber、Yellow、Lime、Green、Emerald、Teal、Cyan、Sky、Blue、Indigo、Violet、Purple、Fuchsia、Pink、Rose，非常足夠我們這些不熟前端配色的工程師直接使用，適合大多數設計需求，並確保不同強度之間的過渡平滑。
強度級別的部分有50、100、200、300、400、500、600、700、800、900、950，數字越小代表越淺適合做為背景，數字越大代表越深適合強調文字，如果是黑暗模式的話就相反。
而且大多數預設的配色都有符合WCAG 標準，所以可以快樂的使用。
圖1. 官方配色。
網頁內容無障礙指引的配色原則
為了讓視力障礙者或色覺缺陷者也能夠友善的瀏覽網頁內容W3C制定了了WCAG（Web Content Accessibility Guidelines，網頁內容無障礙指引），提供一系列標準來改善網頁的配色。
WCAG（Web Content Accessibility Guidelines）對對比度要求進行了分級，主要根據 等級 A、AA、AAA 三個級別來分類，具體如下：
等級 A（最低要求）:等級 A 的對比度要求較低，主要針對部分內容必須達到的最低標準。對比度並不是等級 A 的核心要求，因此針對對比度沒有明確的限制。
等級 AA（推薦標準）: 這是最常被要求的等級，也是大多數無障礙法律（如《美國殘障法案》(ADA, Americans with Disabilities Act)或《歐盟無障礙法案》(EAA, European Accessibility Act)）的依據標準。
等級 AAA（最高標準）: 等級 AAA 是更高的無障礙要求，適用於需要進一步提升可訪問性的情境。它的對比度標準更加嚴格
以下是整理的表格
|
正常文字
|
14pt以下
|
|
大文字
|
14pt加粗或18pt以上
|
|
非文字內容
|
圖形（如按鈕、圖標等）與背景
|
表1.定義說明
|
等級
|
正常文字對比度要求
|
大文字對比度要求
|
非文字內容對比度要求
|
|
A
|
無特定要求
|
無特定要求
|
無特定要求
|
|
AA
|
≥4.5:1
|
≥3:1
|
≥3:1
|
|
AAA
|
≥7:1
|
≥4.5:1
|
更高對比度
（未具體規定）
|
表2.不同等級對比度。
這邊放一個我常用的顏色對比檢查器網址，(https://coolors.co/contrast-checker/)，選好顏色就會自動幫你計算出對比度。
圖2. Color Contrast Checker
另外也推薦一個很強大的線上無障礙檢網站(https://wave.webaim.org/)，是由WebAIM 提供用於檢測網站的無障礙問題，很直觀的就把網頁上的介面直接標註出來幫助設計師可以優化網站的無障礙性，只要貼上網站就可以自動分析檢查，還會把網站上的問題詳細案類別出報告，找出具體的位址並給修復建議，下面是臺大網站的測試結果，看完就知道會有多強大，大家一定要嘗試看看。
圖3. Web Accessibility Evaluation Tool。
自行建立顏色資料庫
假如網頁的色調要依照使用者需求變更，大多數都是要跟著組織的logo配色而修改配色，這時我們就可以到tailwind.config.js設定檔裡面去新增。
tailwind.config.js裡面加一個colors，顏色可以是單一顏色也可以增加強度，圖4是修改自官方的範例，這樣子build的時候就會自動增加到css裡面。
圖4.自建顏色庫(覆蓋)
但如果依照我圖4的設置方法會發現TailwindCss內建的顏色都會被覆蓋過去，原本的Blue跟Yellow都會消失只保留我們預設的顏色，因此我們要將colors移到extend(擴展)裡面如圖5，這樣子就可以繼續使用官方預設的顏色順便加入自己喜歡的顏色。
圖5.自建顏色庫(擴展)
實際演練
我們在html上，寫一個button，class中加入bg-blue-500，代表背景是中間調的藍色，後面還有hover:bg-blue-700，hover代表滑鼠移到按鈕上面時顯示的顏色，在後面還有active:bg-blue-900，active代表滑鼠點按鈕時的顏色。這樣一來就完成了這個元件的顏色設定，真的很簡單很適合工程師腦袋，只是缺點是後面越做越精細時class會有一大串，不好維護，要靠前端JS框架去管理html上的每個元件，這樣維護起來會比較舒服。
圖6.button樣式
圖7.CSS結果
以下是顏色相關的指令，給大家參考練習使用。
|
項目
|
指令
|
舉例
|
|
文字顏色
|
text-{color}-{shade}
|
text-blue-500 /* 藍色文字 */
|
|
背景顏色
|
bg-{color}-{shade}
|
bg-yellow-500 /* 黃色背景 */
|
|
邊框顏色
|
border-{color}-{shade}
|
border-gray-500 /* 灰色邊框 */
|
|
分隔線顏色
|
divide-{color}-{shade}
|
divide-gray-300 /* 灰色分隔線 */
|
|
外框顏色（Focus Ring）
|
ring-{color}-{shade}
|
ring-blue-400 /* 元素聚焦藍色外框 */
|
|
投影顏色
※需安裝插件 tailwindcss-shadow
|
shadow-{color}
|
shadow-red-500 /* 紅色陰影 */
|
|
透明度顏色
|
在顏色指令後加 /opacity
顏色設置透明度，數值介於 0-100
|
bg-blue-500/50 /* 50% 透明藍色背景 */
|
|
漸變顏色
|
from-{color}-{shade}
via-{color}-{shade}
to-{color}-{shade}
|
bg-gradient-to-r from-blue-500 to-purple-600 /* 左藍右紫漸變 */
bg-gradient-to-b from-green-300 via-yellow-400 to-red-500 /* 上綠中黃下紅漸變 */
|
|
滾動條顏色
※需安裝插件
tailwind-scrollbar
|
|
scrollbar-track-blue-200
/* 滾動條軌道藍色 */
|
|
列表標記顏色
|
marker-{color}-{shade}
|
marker-red-400 /* 紅色項目符號 */
|
表3.跟顏色有關的class
補充插件安裝
前面的表3有提到2個官方插件(tailwindcss-shadow-color跟tailwind-scrollbar)，這邊來補充一下安裝方式。
首先回憶起第一篇的安裝tailwindcss方式，先打開終端機輸入安裝指令，第一行是增加陰影顏色，第二行是自定義滾動條樣式，第三行是隱藏滾動條。
npm install tailwindcss-shadow
npm install tailwind-scrollbar
npm install tailwind-scrollbar-hide
並在 tailwind.config.js 的plugins中添加插件就好，如下圖。
圖8.加入插件
結語
Tailwind CSS 的顏色系統是一個讓人「愛不釋手」的設計神器，為開發者提供了強大、靈活又高效的工具集！無論你是想讓文字變得吸睛有力，還是想為背景增添一抹驚艷的漸變色彩，Tailwind 都能輕鬆搞定，像魔術一樣讓你的設計立刻「靈動起來」。
它的結構化命名方式，簡潔又直觀，就像是為每種顏色都貼上了清晰的標籤，不需要再去死記硬背那些難懂的十六進制顏色代碼。更棒的是，Tailwind 還讓你可以隨心所欲地調整透明度、強度級別，甚至自定義顏色配置，完全符合你的設計需求。不僅如此，這套系統還貼心地考慮了無障礙設計，讓你的作品在美觀之餘，還兼具高對比度和易讀性，真是體貼得不得了！
然而，Tailwind 雖然功能強大，也有「小脾氣」需要注意。如果使用過多顏色指令，HTML 代碼可能會變成一串「彩虹碼」，讓人眼花繚亂。因此，開發者需要在代碼可讀性和功能性之間找到平衡，才能把這個顏色系統的優勢發揮得淋漓盡致。
總的來說，Tailwind CSS 的顏色系統就像一個隨時待命的顏色大師，隨時為你的設計提供完美的顏色搭配。它不僅提升了開發效率，還讓你的作品更上一層樓，成為既高效又高顏值的代名詞！
參考資料