色相旋轉

​基本用法

​旋轉元素的色相

使用 hue-rotate-{amount} 工具程式旋轉元素的色相。

hue-rotate-15

hue-rotate-90

hue-rotate-180

-hue-rotate-60

<div class="hue-rotate-15 ...">
  <!-- ... -->
</div>
<div class="hue-rotate-90 ...">
  <!-- ... -->
</div>
<div class="hue-rotate-180 ...">
  <!-- ... -->
</div>
<div class="-hue-rotate-60 ...">
  <!-- ... -->
</div>

​使用負值

若要使用負的 hue-rotate 值，請在類別名稱前面加上連字號，將其轉換為負值。

<div class="-hue-rotate-60 ...">
  <!-- ... -->
</div>

​移除濾鏡

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

<div class="blur-md invert hue-rotate-180 md:filter-none">
  <!-- ... -->
</div>

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

​有條件套用

​滑鼠移入、焦點和其他狀態

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

<div class="hue-rotate-60 hover:hue-rotate-0">
  <!-- ... -->
</div>

如要查看所有可用的狀態修改器完整清單，請查看 懸停、焦點和其它狀態 文件。

​中斷點和媒體查詢

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

<div class="hue-rotate-60 md:hue-rotate-0">
  <!-- ... -->
</div>

如需瞭解更多資訊，請查看 回應式設計、 暗模式 和 其他媒體查詢修改器 文件。

​使用自訂值

​自訂您的佈景主題

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

module.exports = {
  theme: {
    extend: {
      hueRotate: {
        '-270': '-270deg',
        270: '270deg',
      }
    }
  }
}

在 主題自訂 文件中進一步了解如何自訂預設主題。

​任意值

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

<div class="hue-rotate-[270deg]">
  <!-- ... -->
</div>

在 任意值 文件中進一步了解任意值支援。