background-color

例

基本的な例

要素の背景色を制御するには、bg-white、bg-indigo-500、bg-transparent のようなユーティリティを使用します。

<button class="bg-blue-500 ...">Button A</button>
<button class="bg-cyan-500 ...">Button B</button>
<button class="bg-pink-500 ...">Button C</button>

不透明度の変更

要素の背景色の不透明度を制御するには、色の不透明度修飾子を使用します。

<button class="bg-sky-500/100 ..."></button>
<button class="bg-sky-500/75 ..."></button>
<button class="bg-sky-500/50 ..."></button>

カスタム値の使用

以下を使用してください bg-[<value>] 構文 を設定するには背景色完全にカスタムな値に基づいて

<div class="bg-[#50d71e] ...">
  <!-- ... -->
</div>

CSS変数には、以下も使用できます。 bg-(<custom-property>) 構文

<div class="bg-(--my-color) ...">
  <!-- ... -->
</div>

これは単なる省略形です。 bg-[var(<custom-property>)] これは自動的に var() 関数を追加します。

ホバー時に適用

プレフィックスa background-color ユーティリティを、次のようなバリアントで hover:* その状態でのみユーティリティを適用します。

<button class="bg-indigo-500 hover:bg-fuchsia-500 ...">Save changes</button>

バリアントの使用方法の詳細については、バリアントのドキュメントを参照してください。

レスポンシブデザイン

プレフィックスa background-color ユーティリティ md: のようなブレークポイントバリアントを使用すると、ユーティリティを適用するのはmedium 画面サイズ以上の場合のみになります。

<div class="bg-blue-500 md:bg-green-500 ...">
  <!-- ... -->
</div>

バリアントの使用方法の詳細については、バリアントのドキュメントを参照してください。

テーマのカスタマイズ

--color-* テーマ変数を使用して、以下をカスタマイズします。color プロジェクト内のユーティリティ

@theme {
  --color-regal-blue: #243c5a; 
}

これで bg-regal-blue ユーティリティをマークアップで使用できます。

<div class="bg-regal-blue">
  <!-- ... -->
</div>

テーマのカスタマイズの詳細については、以下を参照してください。 テーマのドキュメント.