色相回転

​基本的な使い方

​要素の色相を回転させる

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>

​負の値を使用する

負の色相回転値を使用するには、クラス名の前にダッシュを付けて負の値に変換します。

<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ユーティリティをのみに適用できますhover.

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

利用可能なすべての状態モディファイアの完全なリストについては、 ホバー、フォーカス、その他の状態に関するドキュメントを参照してください。

​ブレークポイントとメディアクエリ

バリアントモディファイアを使用して、レスポンシブブレークポイント、ダークモード、prefers-reduced-motionなどのメディアクエリをターゲットにすることもできます。たとえば、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>

任意の値のサポートについては、以下で詳しく学ぶことができます。 任意の値を指定する ドキュメントをご覧ください。