セピア

​基本的な使用方法

​セピアフィルターの追加

sepia と sepia-0 ユーティリティを使用して、要素をセピアでレンダリングするか、フルカラーでレンダリングするかを制御します。

sepia-0

セピア

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

​フィルターの削除

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

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

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

​条件付き適用

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

Tailwind を使用すると、バリアント修飾子を使用してさまざまな状態でユーティリティクラスを条件付きで適用できます。たとえば、 ホバー:sepia-0 を使用して、sepia-0 ユーティリティをホバー.

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

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

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

レスポンシブなブレークポイント、ダークモード、prefers-reduced-motion など、メディアクエリをターゲットとするためにバリアント修飾子を使用することもできます。たとえば、md:sepia-0 を使用すると、中規模以上の画面サイズでのみ sepia-0 ユーティリティが適用されます。

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

詳細については、 レスポンシブデザイン, ダークモード および その他のメディアクエリ修飾子に関するドキュメントを参照してください。.

​カスタム値の使用

​テーマのカスタマイズ

デフォルトでは、Tailwindは汎用的なsepiaユーティリティをいくつか含んでいます。これらの値は、tailwind.config.jsファイル内のtheme.sepiaまたはtheme.extend.sepiaを編集することでカスタマイズできます。

module.exports = {
  theme: {
    extend: {
      sepia: {
        25: '.25',
        75: '.75',
      }
    }
  }
}

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

​任意の値

一意のsepia値を使用する必要がある場合（テーマに含める意味がない場合）、角括弧を使用して、任意の値を使用してその場でプロパティを生成します。

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

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