🕶

【Tailwind和訳】FILTERS/Sepia

2021/10/24に公開約1,700字

この記事について

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

Sepia

要素にセピアフィルターを適用するためのユーティリティ。

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

使い方

要素をセピア色で表示するか、フルカラーで表示するかを決めるには、filterユーティリティーと一緒にsepiaおよびsepia-0ユーティリティーを使用します。

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

レスポンシブ

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

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

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

カスタマイズ

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

tailwind.config.js
  module.exports = {
    theme: {
+     extend: {
+       sepia: {
+         25: '.25',
+         75: '.75',
+       }
+     }
    }
  }

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

バリアント

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

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

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

tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       sepia: ['hover', 'focus'],
      }
    }
  }

無効化

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

tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     sepia: false,
    }
  }

Discussion

ログインするとコメントできます