バックグラウンドリピート

要素の背景画像の繰り返しを制御するためのユーティリティ

Class reference

Class
Properties
.bg-repeatbackground-repeat: repeat;
.bg-no-repeatbackground-repeat: no-repeat;
.bg-repeat-xbackground-repeat: repeat-x;
.bg-repeat-ybackground-repeat: repeat-y;
.bg-repeat-roundbackground-repeat: round;
.bg-repeat-spacebackground-repeat: space;

Repeat

.bg-repeatを使用して、背景画像を垂直方向と水平方向の両方に繰り返します。

<div class="bg-repeat bg-center ..." style="background-image: url(...)"></div>

No Repeat

背景画像を繰り返したくない場合は、.bg-no-repeatを使用します。

<div class="bg-no-repeat bg-center ..." style="background-image: url(...)"></div>

Repeat Horizontally

.bg-repeat-xを使用して、背景画像を水平方向にのみ繰り返します。

<div class="bg-repeat-x bg-center ..." style="background-image: url(...)"></div>

Repeat Vertically

.bg-repeat-yを使用して、背景画像を垂直方向にのみ繰り返します。

<div class="bg-repeat-y bg-center ..." style="background-image: url(...)"></div>

レスポンシブ

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

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

<div class="bg-repeat sm:bg-no-repeat md:bg-repeat-x lg:bg-repeat-y xl:bg-no-repeat ..." style="background-image: url(...)"></div>

カスタマイズ

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

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

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

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

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

機能を使用しない場合

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

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

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

Tailwind UI is now in early access!