【Tailwind和訳】FILTERS/Invert

この記事について

この記事は、FILTERS/Invertの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Invert (v2.1+)

エレメントにインバートフィルターを適用するためのユーティリティーです。

Class	Properties
invert-0	--tw-invert: invert(0);
invert	--tw-invert: invert(1);

使い方

要素を反転した色でレンダリングするか、通常の色でレンダリングするかを決めるには、invertおよびinvert-0ユーティリティをfilterユーティリティと一緒に使用します。

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

レスポンシブ

特定のブレークポイントで要素のインバートフィルターを制御するには、既存のインバートユーティリティーに{screen}:というプレフィックスを追加します。たとえば、md:invert-0を使うと、invert-0ユーティリティを medium スクリーンサイズ以上でのみ適用します。

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

Tailwind のレスポンシブデザイン機能の詳細については、レスポンシブデザインのドキュメントをご覧ください。

カスタマイズ

tailwind.config.jsファイルのthemeセクションにあるinvertキーを使って、どのinvertユーティリティを生成するかをカスタマイズできます。

tailwind.config.js

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

デフォルトのテーマのカスタマイズについては、テーマのカスタマイズに関するドキュメントをご覧ください。

バリアント

デフォルトでは、レスポンシブバリアントのみがインバートユーティリティのために生成されます。

tailwind.config.jsファイルのvariantsセクションにあるinvertプロパティを変更することで、インバートユーティリティのために生成されるバリアントをコントロールすることができます。

例えば、この設定はhoverとfocusのバリアントも生成します。

tailwind.config.js

  module.exports = {
    variants: {
      extend: {
        // ...
+       invert: ['hover', 'focus'],
      }
    }
  }

無効化

プロジェクトでインバートユーティリティーを使用しない場合は、設定ファイルのcorePluginsセクションでinvertプロパティをfalseに設定することで、完全に無効にすることができます。

tailwind.config.js

  module.exports = {
    corePlugins: {
      // ...
+     invert: false,
    }
  }