Tailwind CSS 背景色

Tailwind CSS では、背景色（Background Color）は最もよく使われるユーティリティクラスの一つで、要素の背景色をすばやく設定できます。

Tailwind はさまざまな色のオプションと異なる色調を提供しており、必要なスタイルを柔軟に適用できます。

背景色の基本構文：

<div class="bg-{color}">
  <!-- 内容 -->
</div>

一般的な背景色クラス：

クラス名	説明	例
`bg-{color}`	背景色を設定する	`bg-red-500`，`bg-blue-200`
`bg-transparent`	透明な背景色を設定する	`bg-transparent`
`bg-current`	背景色を現在のテキスト色に設定する（アイコンの背景によく使用されます）	`bg-current`
`bg-white`	背景色を白に設定する	`bg-white`
`bg-black`	背景色を黒に設定する	`bg-black`
`bg-gray-{n}`	背景色をグレーに設定します。`{n}`はグレーの濃淡です（50 から 900）	`bg-gray-100`, `bg-gray-700`

背景色のグラデーション（Gradient）：

Tailwind CSS は背景の線形グラデーションや放射グラデーションなどをサポートしています。次を使用できます：bg-gradient-to-{direction}でグラデーションの方向を指定し、from-{color}、to-{color}でグラデーションの開始色と終了色を設定します。

クラス名	説明	例
`bg-gradient-to-{direction}`	グラデーション背景の方向を設定します。`direction`は次のとおりです：`t`、`r`、`b`、`l`、`tr`、`tl`、`br`、`bl`等	`bg-gradient-to-r`（左から右へのグラデーション）
`from-{color}`	グラデーション背景の開始色を設定します	`from-blue-500`
`to-{color}`	グラデーション背景の終了色を設定します	`to-green-300`
`via-{color}`	グラデーション中間の色を設定します（オプション）	`via-purple-400`

例

<div class="bg-gradient-to-r from-blue-500 to-green-300 p-10 text-white">
青から緑へのグラデーション背景
</div>

背景色の透明度（Opacity）：

Tailwind は背景の透明度を制御するユーティリティクラスも提供しています。bg-opacity-{value}で透明度の値を設定します、{value}0 から 100 の整数は透明度のパーセンテージを表します。

クラス名	説明	例
`bg-opacity-{n}`	背景色の透明度を設定します	`bg-opacity-50`
`bg-opacity-0`	背景色を完全に透明に設定します	`bg-opacity-0`
`bg-opacity-100`	背景色を完全不透明に設定します	`bg-opacity-100`

例

<div class="bg-blue-500 bg-opacity-50 p-10 text-white">
半透明の青い背景
</div>

Tailwind 設定でカスタム背景色を使用する：

カスタム背景色はtailwind.config.js設定ファイルで定義できます。theme.extendセクションのcolors属性の下で色を定義することで、デフォルトの色セットを拡張できます。

例

module.exports = {
theme: {
extend: {
colors: {
'custom-blue': '#1D4ED8',
'custom-gray': '#4B5563',
}
}
}
}

HTML でカスタム背景色を使用する：

例

<div class="bg-custom-blue p-10 text-white">
カスタムの青色背景を使用する
</div>

総合的な例

例

<div class="bg-blue-500 text-white p-6 mb-6">
<h1 class="text-xl">青い背景</h1>
<p>これは青い背景を持つコンテナで、文字色は白です。</p>
</div>


<div class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white p-6 mb-6">
<h1 class="text-xl">グラデーション背景</h1>
<p>これは紫からピンク、そして赤への線形グラデーション背景です。</p>
</div>


<div class="bg-green-500 bg-opacity-50 text-white p-6">
<h1 class="text-xl">透明度のある背景</h1>
<p>これは半透明の緑色背景を持つコンテナです。</p>
</div>

試してみる »

解説：

基本の背景色：

bg-blue-500：背景色を青に設定します。
text-white：テキスト色を白に設定します。

グラデーション背景：

bg-gradient-to-r：グラデーション背景の方向を左から右に設定します。
from-purple-500：グラデーションの開始色を紫に設定します。
to-red-500：グラデーションの終了色を赤に設定します。

背景の透明度：

bg-opacity-50：背景色の透明度を 50%（半透明）に設定します。

その他の拡張機能