【Tailwind和訳】BACKGROUNDS/Background Origin

この記事について

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

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

Background Origin (v2.2+)

要素の背景が、ボーダー、パディング、コンテンツに対してどのように配置されるかを制御するユーティリティです。

Class	Properties
bg-origin-border	background-origin: border-box;
bg-origin-padding	background-origin: padding-box;
bg-origin-content	background-origin: content-box;

使い方

bg-origin-border、bg-origin-padding、および bg-origin-content を使用して、要素の背景がどこにレンダリングされるかを制御します。

<div class="bg-origin-border p-4 border-4 border-dashed ..." style="background-image: url(...)">
  1
</div>

<div class="bg-origin-padding p-4 border-4 border-dashed ..." style="background-image: url(...)">
  2
</div>

<div class="bg-origin-content p-4 border-4 border-dashed ..." style="background-image: url(...)">
  3
</div>

レスポンシブ

特定のブレークポイントで background-origin プロパティを制御するには、既存の background-origin ユーティリティーに{screen}: というプレフィックスを追加します。例えば、md:bg-origin-padding を使用して、bg-origin-padding ユーティリティを中程度の画面サイズ以上でのみ適用します。

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

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

カスタマイズ

バリアント

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

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

例えば、この設定はホバーとフォーカスのバリアントも生成します。

tailwind.config.js

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

無効化

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

tailwind.config.js

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