區分顏色

​基本用法

​設定分隔線顏色

使用 divide-{color} 工具控制元素之間的邊框顏色。

<div class="divide-y divide-blue-200">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

​變更不透明度

使用顏色不透明度修改器控制分隔線顏色的不透明度。

<div class="divide-y-4 divide-slate-400/25 ...">
  <!-- ... -->
</div>

你可以使用 不透明度比例 中定義的任何值，或者在需要偏離設計代碼時使用任意值。

<div class="divide-y-4 divide-slate-400/[.24] ...">
  <!-- ... -->
</div>

​有條件地套用

​游標移入、焦點和其他狀態

Tailwind 讓您使用變異修飾符在不同狀態中條件式套用工具程式類別。例如，使用 hover:divide-pink-400 僅在游標移入時套用 divide-pink-400 工具程式。

<div class="divide-y divide-teal-400 hover:divide-pink-400">
  <!-- ... -->
</div>

如需所有可用狀態修飾符的完整清單，請查看 游標移入、焦點和其它狀態 文件。

​中斷點和媒體查詢

您也可以使用變異修飾符來鎖定媒體查詢，例如回應式中斷點、暗模式、偏好減少動畫等。例如，使用 md:divide-pink-400 僅在中型螢幕尺寸及以上套用 divide-pink-400 工具程式。

<div class="divide-y divide-teal-400 md:divide-pink-400">
  <!-- ... -->
</div>

如需深入了解，請查看下列文件：回應式設計、深色模式，以及其他媒體查詢修改器。

​使用自訂值

​自訂您的佈景主題

預設情況下，Tailwind 會將整個預設調色盤設為可用divide顏色。您可以透過編輯 theme.colors 或 theme.extend.colors 在您的 tailwind.config.js 檔案中 自訂您的調色盤。

module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      },
    }
  }
}

或者，您也可以透過編輯 theme.divideColor 或 theme.extend.divideColor 在您的 tailwind.config.js 檔案中，只自訂您的divide顏色。

在佈景主題自訂文件中，深入了解如何自訂預設佈景主題。

​任意值

如果您需要使用一次性的 divide-{color} 值，而將其包含在您的主題中沒有意義，請使用方括號來使用任何任意值動態產生一個屬性。

<div class="divide-[#243c5a]">
  <!-- ... -->
</div>

在 任意值 文件中深入了解任意值支援。