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>

這對於透過覆寫瀏覽器的預設顏色來設定像核取方塊和選項群組等元素的樣式很有幫助。

變更不透明度

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

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

目前設定強調色不透明度的瀏覽器支援有限，目前僅適用於 Firefox。

使用自訂值

使用 accent-[<value>] 語法 來設定強調色基於完全自訂的值

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

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

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

這只是 accent-[var(<custom-property>)] 的簡寫，它會自動為您新增 var() 函式。

滑鼠懸停時套用

在accent-color 工具類別加上像 hover:* 這樣的變體前綴，僅在該狀態下套用該工具類別 同意條款

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

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

響應式設計

在accent-color 工具類別加上像 accent-color 工具類別 加上像 md: 這樣的斷點變體，僅在中等 螢幕尺寸及以上套用該工具類別

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

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

自訂您的主題

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

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

現在，regal-blue accent-工具類別可以在您的標記中使用 utility can be used in your markup

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

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