accent-color

範例（Examples）

設定強調色（Setting the accent color）

使用 accent-rose-500 和 accent-lime-600 等通用類別來變更元素的強調色：

<label>  <input type="checkbox" checked />  Browser default</label><label>  <input class="accent-pink-500" type="checkbox" checked />  Customized</label>

這對於透過覆寫瀏覽器預設顏色來設定核取方塊和單選按鈕群組等元素的樣式非常有用。

變更不透明度（Changing the opacity）

使用顏色不透明度修飾符來控制元素強調色的不透明度：

<input class="accent-purple-500/25" type="checkbox" checked /><input class="accent-purple-500/75" type="checkbox" checked />

設定強調色不透明度的瀏覽器支援有限，目前僅在 Firefox 中有效。

使用自訂值（Using a custom value）

使用 accent-[<value>] 語法，根據完全自訂的值來設定 accent color：

<input class="accent-[#50d71e] ..." type="checkbox" />

對於 CSS 變數，你也可以使用 accent-(<custom-property>) 語法：

<input class="accent-(--my-accent-color) ..." type="checkbox" />

這只是 accent-[var(<custom-property>)] 的簡寫形式，會自動為你加上 var() 函式。

懸停時套用（Applying on hover）

在 accent-color 通用類別前面加上像 hover:* 這樣的變體，讓該通用類別只在該狀態下套用：

<input class="accent-black hover:accent-pink-500" type="checkbox" />

在變體文件中了解更多關於使用變體的資訊。

響應式設計（Responsive design）

在 accent-color 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：

<input class="accent-black md:accent-pink-500 ..." type="checkbox" />

在變體文件中了解更多關於使用變體的資訊。

自訂你的主題（Customizing your theme）

使用 --color-* 主題變數來自訂專案中的 color 通用類別：

@theme {  --color-regal-blue: #243c5a; }

現在可以在標記中使用 accent-regal-blue 通用類別：

<input class="accent-regal-blue" type="checkbox" />

在主題文件中了解更多關於自訂主題的資訊。