【Tailwind和訳】BACKGROUNDS/Background Clip

この記事について

この記事は、BACKGROUNDS/Background Clipの記事を和訳したものです。

Background Clip

要素の背景のバウンディングボックスを制御するためのユーティリティーです。

Class	Properties
bg-clip-border	background-clip: border-box;
bg-clip-padding	background-clip: padding-box;
bg-clip-content	background-clip: content-box;
bg-clip-text	background-clip: text;

使い方

要素の背景のバウンディングボックスを制御するには、bg-clip-{keyword}ユーティリティを使用します。

<div class="bg-clip-border p-6 bg-indigo-600 border-4 border-indigo-300 border-dashed"></div>
<div class="bg-clip-padding p-6 bg-indigo-600 border-4 border-indigo-300 border-dashed"></div>
<div class="bg-clip-content p-6 bg-indigo-600 border-4 border-indigo-300 border-dashed"></div>

テキストへのクロップ

bg-clip-textを使って、要素の背景をテキストの形に合わせて切り抜くことができます。テキストから背景画像が透けて見えるような効果に便利です。

<div class="text-5xl font-extrabold ...">
  <span class="bg-clip-text text-transparent bg-gradient-to-r from-green-400 to-blue-500">
    Hello world
  </span>
</div>

レスポンシブ

特定のブレークポイントで要素のバックグラウンドのバウンディング・ボックスを制御するには、既存のバックグラウンドクリップユーティリティーに{screen}:というプレフィックスを追加します。例えば、要素にmd:bg-clip-paddingクラスを追加すると、bg-clip-paddingユーティリティを medium スクリーンサイズ以上に適用します。

<div class="bg-clip-border md:bg-clip-padding">
  <!-- ... -->
</div>

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

カスタマイズ

バリアント

デフォルトでは、バックグラウンドクリップユーティリティにはレスポンシブバリアントのみが生成されます。

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

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

tailwind.config.js

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

無効化

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

tailwind.config.js

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