バックグラウンドカラー

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

Class reference

Class
Preview 
.bg-transparent
.bg-current
.bg-black
.bg-white
.bg-gray-100
.bg-gray-200
.bg-gray-300
.bg-gray-400
.bg-gray-500
.bg-gray-600
.bg-gray-700
.bg-gray-800
.bg-gray-900
.bg-red-100
.bg-red-200
.bg-red-300
.bg-red-400
.bg-red-500
.bg-red-600
.bg-red-700
.bg-red-800
.bg-red-900
.bg-orange-100
.bg-orange-200
.bg-orange-300
.bg-orange-400
.bg-orange-500
.bg-orange-600
.bg-orange-700
.bg-orange-800
.bg-orange-900
.bg-yellow-100
.bg-yellow-200
.bg-yellow-300
.bg-yellow-400
.bg-yellow-500
.bg-yellow-600
.bg-yellow-700
.bg-yellow-800
.bg-yellow-900
.bg-green-100
.bg-green-200
.bg-green-300
.bg-green-400
.bg-green-500
.bg-green-600
.bg-green-700
.bg-green-800
.bg-green-900
.bg-teal-100
.bg-teal-200
.bg-teal-300
.bg-teal-400
.bg-teal-500
.bg-teal-600
.bg-teal-700
.bg-teal-800
.bg-teal-900
.bg-blue-100
.bg-blue-200
.bg-blue-300
.bg-blue-400
.bg-blue-500
.bg-blue-600
.bg-blue-700
.bg-blue-800
.bg-blue-900
.bg-indigo-100
.bg-indigo-200
.bg-indigo-300
.bg-indigo-400
.bg-indigo-500
.bg-indigo-600
.bg-indigo-700
.bg-indigo-800
.bg-indigo-900
.bg-purple-100
.bg-purple-200
.bg-purple-300
.bg-purple-400
.bg-purple-500
.bg-purple-600
.bg-purple-700
.bg-purple-800
.bg-purple-900
.bg-pink-100
.bg-pink-200
.bg-pink-300
.bg-pink-400
.bg-pink-500
.bg-pink-600
.bg-pink-700
.bg-pink-800
.bg-pink-900

使用方法

.bg-{color}ユーティリティを使用して要素の背景色を制御します。

<button class="bg-blue-500 ...">Button</button>

不透明度の変更v1.4.0+

.bg-opacity-{amount}ユーティリティを使用して、要素の背景色の不透明度を制御します。

<div class="bg-blue-500 bg-opacity-100"></div>
<div class="bg-blue-500 bg-opacity-75"></div>
<div class="bg-blue-500 bg-opacity-50"></div>
<div class="bg-blue-500 bg-opacity-25"></div>
<div class="bg-blue-500 bg-opacity-0"></div>

詳細についてはbackground opacity documentationをご覧ください。

レスポンシブ

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

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

<button class="bg-blue-500 sm:bg-green-500 md:bg-indigo-500 lg:bg-red-500 xl:bg-black ...">Button</button>

Hover

ホバー時に要素の背景色を制御するには、既存の背景色ユーティリティにhover:プレフィックスを追加します。たとえば、hover:bg-blue-500を使用して、ホバーにbg-blue-500ユーティリティを適用します。

<button class="bg-blue-500 hover:bg-blue-700 ...">
  Hover me
</button>

ホバーユーティリティは、レスポンシブ {screen}:プレフィックスを focus:プレフィックスのに追加することで、レスポンシブユーティリティと組み合わせることもできます。

<button class="... md:bg-blue-500 md:hover:bg-blue-700 ...">Button</button>

Focus

フォーカスされている要素の背景色を制御するには、既存の背景色ユーティリティにfocus:プレフィックスを追加します。 たとえば、focus:bg-blue-500を使用して、bg-blue-500ユーティリティをフォーカスに適用します。

<input class="bg-gray-200 focus:bg-white ...">

フォーカスユーティリティは、レスポンシブ {screen}:プレフィックスを focus:プレフィックスのに追加することで、レスポンシブユーティリティと組み合わせることもできます。

<input class="... md:bg-gray-200 md:focus:bg-white ...">

カスタマイズ

バックグラウンドカラー

デフォルトで、Tailwindはdefault color paletteを背景色として使用できるようにします。

tailwind.config.jsfileのtheme.colorsvariableを変更してcustomize your color paletteすることができます。 もしくは、Tailwindのコンフィグのtheme.backgroundColorセクションを使用して背景色だけをカスタマイズすることができます。

  // tailwind.config.js
  module.exports = {
    theme: {
      backgroundColor: theme => ({
-       ...theme('colors'),
+       'primary': '#3490dc',
+       'secondary': '#ffed4a',
+       'danger': '#e3342f',
      })
    }
  }

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

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

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

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

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

機能を使用しない場合

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

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

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

Tailwind UI is now in early access!