反轉

​基本用法

​反轉元素的顏色

使用 invert 和 invert-0 輔助程式控制是否要以反轉顏色或正常方式呈現元素。

invert-0

invert

<div class="invert-0 ...">
  <!-- ... -->
</div>
<div class="invert ...">
  <!-- ... -->
</div>

​移除濾鏡

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

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

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

​有條件套用

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

Tailwind 讓您可以使用變異修飾符在不同的狀態中有條件地套用工具程式類別。例如，使用 hover:invert-0 僅在滑鼠懸停時套用 invert-0 工具程式。

<div class="invert hover:invert-0">
  <!-- ... -->
</div>

如需查看所有可用的狀態修改器完整清單，請參閱 懸停、焦點及其他狀態 文件。

​中斷點和媒體查詢

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

<div class="invert md:invert-0">
  <!-- ... -->
</div>

如需深入了解，請參閱 回應式設計、 深色模式 和 其他媒體查詢修改器 文件。

​使用自訂值

​自訂您的佈景主題

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

module.exports = {
  theme: {
    extend: {
      invert: {
        25: '.25',
        50: '.5',
        75: '.75',
      }
    }
  }
}

在主題自訂文件了解有關自訂預設主題的更多資訊。

​任意值

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

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

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