バックグラウンドクリップ

Tailwind CSS version
v1.7.0+

要素の背景の境界ボックスを制御するためのユーティリティ

Class reference

Class
Properties
.bg-clip-borderbackground-clip: border-box;
.bg-clip-paddingbackground-clip: padding-box;
.bg-clip-contentbackground-clip: content-box;
.bg-clip-textbackground-clip: text;

使用方法

bg-clip-{keyword}ユーティリティを使用して、要素の背景の境界ボックスを制御します。

.bg-clip-border

.bg-clip-padding

.bg-clip-content

<div class="bg-clip-border p-4 border-4 border-dashed border-purple-800 bg-purple-500"></div>
<div class="bg-clip-padding p-4 border-4 border-dashed border-purple-800 bg-purple-500"></div>
<div class="bg-clip-content p-4 border-4 border-dashed border-purple-800 bg-purple-500"></div>

テキストのトリミング

bg-clip-textを使用して、テキストの形状に一致するように要素の背景をトリミングします。 テキストを通して背景画像を表示したい効果に役立ちます。

Hello world
<div class="text-center text-5xl font-extrabold leading-none tracking-tight">
  <span class="bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
    Hello world
  </span>
</div>

レスポンシブ

特定のブレークポイントで要素の背景の境界ボックスを制御するには、既存の背景クリップユーティリティに {screen}:プレフィックスを追加します。 たとえば、クラスmd:bg-clip-paddingを要素に追加すると、中程度の画面サイズ以上でbg-clip-paddingユーティリティが適用されます。

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

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

カスタマイズ

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive バリアントはbackground clip utilitiesのために作られます。

あなたはどのバリアントがbackground clip utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのbackgroundClipプロパティを修正することによってコントロールできます。

例として、この設定は also hover and focus バリアントを作ります。

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     backgroundClip: ['responsive'],
+     backgroundClip: ['responsive', 'hover', 'focus'],
    }
  }

機能を使用しない場合

もしbackground clip utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのbackgroundClip propertyfalseに設定することで完全に無効にすることができます。

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

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!