對比

​基本用法

​變更元素對比

使用 contrast-{amount?} 工具來控制元素的對比。

contrast-50

contrast-100

對比-125

對比-200

<div class="contrast-50 ...">
  <!-- ... -->
</div>
<div class="contrast-100 ...">
  <!-- ... -->
</div>
<div class="contrast-125 ...">
  <!-- ... -->
</div>
<div class="contrast-200 ...">
  <!-- ... -->
</div>

​移除濾鏡

若要一次移除元素上的所有濾鏡，請使用 filter-none 工具

<div class="blur-md invert contrast-125 md:filter-none">
  <!-- ... -->
</div>

當您想要有條件地移除濾鏡時，這會很有用，例如在滑鼠懸停或特定斷點處。

​有條件地應用

​滑鼠懸停、焦點和其他狀態

Tailwind 讓您可以使用變異修飾符在不同狀態下有條件地應用實用程式類別。例如，使用 hover:contrast-150 僅在滑鼠懸停時應用 contrast-150 實用程式。

<div class="contrast-125 hover:contrast-150">
  <!-- ... -->
</div>

如需所有可用狀態修飾符的完整清單，請查看 滑鼠懸停、焦點和其他狀態 文件。

​斷點和媒體查詢

您也可以使用變體修改器來鎖定媒體查詢，例如回應式中斷點、深色模式、偏好減少動畫等。例如，使用 md:contrast-150 僅在中型螢幕尺寸及以上套用 contrast-150 實用程式。

<div class="contrast-125 md:contrast-150">
  <!-- ... -->
</div>

若要深入了解，請查看回應式設計、深色模式和其他媒體查詢修改器的說明文件。

​使用自訂值

​自訂您的主題

預設情況下，Tailwind 包含一些一般用途的 contrast 實用程式。您可以在 tailwind.config.js 檔案中編輯 theme.contrast 或 theme.extend.contrast 來自訂這些值。

module.exports = {
  theme: {
    extend: {
      contrast: {
        25: '.25',
      }
    }
  }
}

在主題自訂說明文件中深入了解如何自訂預設主題。

​任意值

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

<div class="contrast-[.25]">
  <!-- ... -->
</div>

在 任意值 文件中了解有關任意值支援的更多資訊。