Skip to content

建立 2026-09-15 更新 2026-09-15

狀態前綴

Utility 可以加 variant 前綴，只在特定狀態生效。寫法是 狀態:工具類，中間沒有空格：hover:bg-sky-500。一個元素可以疊很多個。

互動狀態

<button
  class="rounded-lg bg-sky-600 px-4 py-2 text-white hover:bg-sky-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-600"
>
  送出
</button>
前綴 何時生效
hover: 滑鼠懸停
focus: 元素聚焦（含滑鼠點擊）
focus-visible: 多半是鍵盤聚焦時才顯示外框，按鈕較常用
active: 按下當下
disabled: 搭配 disabled 屬性；記得加 disabled:opacity-50

連結與按鈕至少要有 hover 與鍵盤可辨識的 focus。只有 hover、沒有 focus-visible，鍵盤使用者會不知道焦點在哪。

深色模式

預設 dark: 跟隨系統的 prefers-color-scheme：

<body class="bg-white text-slate-900 dark:bg-slate-950 dark:text-slate-100">

若要改成「在 <html class="dark"> 時才切」，在 CSS 宣告自訂 variant（官方文件 Dark mode 有現成寫法）。無論哪一種，深色不是只把背景塗黑，文字與框線也要一起換，對比才夠。

還有哪些常用前綴

前綴 用途
sm: md: lg: 響應式，見 響應式設計
first: last: 第一／最後一個子項
odd: even: 斑馬紋列
group-hover: 滑過父層（父層要加 group）時改變子層
aria-expanded: 依 ARIA 狀態切換，漢堡選單常用

前綴可以串：md:hover:bg-sky-500 表示「md 以上，而且 hover 時」。由左到右讀即可。

建議先看的影片

官方系列第四集 Hover, Focus and Other States 把前綴語法從 hover 講到 group，長度短、適合跟做。

相關資料