バックグラウンドイメージ

Tailwind CSS version
v1.7.0+

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

Class reference

Class
Properties
.bg-nonebackground-image: none;
.bg-gradient-to-tbackground-image: linear-gradient(to top, var(--gradient-color-stops));
.bg-gradient-to-trbackground-image: linear-gradient(to top right, var(--gradient-color-stops));
.bg-gradient-to-rbackground-image: linear-gradient(to right, var(--gradient-color-stops));
.bg-gradient-to-brbackground-image: linear-gradient(to bottom right, var(--gradient-color-stops));
.bg-gradient-to-bbackground-image: linear-gradient(to bottom, var(--gradient-color-stops));
.bg-gradient-to-blbackground-image: linear-gradient(to bottom left, var(--gradient-color-stops));
.bg-gradient-to-lbackground-image: linear-gradient(to left, var(--gradient-color-stops));
.bg-gradient-to-tlbackground-image: linear-gradient(to top left, var(--gradient-color-stops));

線形グラデーション

要素に線形グラデーションの背景を与えるには、bg-gradient-{direction}ユーティリティの1つを、gradient color stopユーティリティと組み合わせて使用します。

<div class="h-24 bg-gradient-to-r from-orange-400 via-red-500 to-pink-500"></div>

レスポンシブ

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

<div class="bg-gradient-to-r md:bg-gradient-to-t ..."></div>

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

カスタマイズ

バックグラウンドイメージ

デフォルトでは、Tailwindには、8方向に線形グラデーションの背景を作成するための背景画像ユーティリティが含まれています。

tailwind.config.jsファイルのtheme.backgroundImageセクションを編集することで、独自の背景画像を追加できます。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        backgroundImage: theme => ({
+         'hero-pattern': "url('/img/hero-pattern.svg')",
+         'footer-texture': "url('/img/footer-texture.png')",
        })
      }
    }
  }

これらは単にグラデーションである必要はありません。必要な任意の背景画像にすることができます。

これらのクラスはbg-{key}の形式を取るため、たとえば、hero-patternbg-hero-patternになります。

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

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

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

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

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

機能を使用しない場合

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

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

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

Tailwind UI is now in early access!