反転

​基本使用法

​要素の色を反転する

要素を反転色でレンダリングするか、通常どおりレンダリングするかを制御するには、invertおよびinvert-0ユーティリティを使用します。

invert-0

反転

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

​フィルターの削除

要素のすべてのフィルターを一度に削除するには、filter-noneを使用しますユーティリティ

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

これは、ホバー時や特定のブレークポイントなど、条件付きでフィルターを削除したい場合に役立ちます。

​条件付きで適用する

​ホバー、フォーカス、その他の状態

Tailwindでは、バリアント修飾子を使用して、さまざまな状態でユーティリティクラスを条件付きで適用できます。たとえば、以下を使用してください ホバー:invert-0 invert-0ユーティリティを以下にのみ適用しますホバー.

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

使用可能なすべての状態修飾子の完全なリストについては、以下を確認してください ホバー、フォーカス、その他の状態ドキュメント。

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

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

任意の値のサポートについては、 任意の値 に関するドキュメントをご覧ください。