tailwindcss-backgrounds

Tailwind CSS v4.3 の背景ユーティリティに関する完全なリファレンスです。OKLCH P3 カラーパレットを使った `bg-{color}`（v4.2 で追加された `mauve`／`olive`／`mist`／`taupe` パレットを含む）、グラデーション（`bg-linear-*`、`bg-radial-*`、`bg-conic-*`）、背景画像（`bg-cover`／`bg-contain`／`bg-repeat`／位置指定／サイズ指定）、ブレンドモード（`bg-blend-*`）を扱います。

グラデーションのカラーストップ制御（from-*／via-*／to-*）、角度を指定するカスタム線形グラデーション、カスタムカラーと背景画像用のテーマ設定の拡張も含まれます。

Tailwind CSS の背景

Tailwind CSS v4.3 の背景ユーティリティに関する完全なリファレンスです。カラー、グラデーション、画像、位置指定、サイズ指定、ブレンドモードを扱います。

背景色

bg-{color} ユーティリティを使って、最新の OKLCH カラーパレットで背景色を設定します。

<div class="bg-red-500"></div>
<div class="bg-blue-600"></div>
<div class="bg-emerald-400"></div>


<div class="bg-blue-500/50"></div>
<div class="bg-slate-900/75"></div>

カラーパレット（OKLCH P3）

Tailwind のデフォルトパレットは、より広い P3 色域全体で知覚的に均一なカラーを実現するため、OKLCH 色空間を使用しています。

• ニュートラル：slate、gray、zinc、neutral、stone
• 色味のあるニュートラル（v4.2 以降）：mauve、olive、mist、taupe
• カラー：red、orange、amber、yellow、lime、green、emerald、teal、cyan、sky、blue、indigo、violet、purple、fuchsia、pink、rose

各カラーには、50、100、200、300、400、500、600、700、800、900、950 の 11 段階があります。

線形グラデーション

方向とカラーストップを指定する bg-linear-* ユーティリティを使って、線形グラデーションを作成します。

<div class="bg-linear-to-t from-blue-500 to-purple-500"></div>
<div class="bg-linear-to-r from-green-400 via-blue-500 to-purple-600"></div>
<div class="bg-linear-to-br from-yellow-200 to-red-600"></div>





<div class="bg-linear-45 from-slate-400 to-slate-600"></div>
<div class="bg-linear-180 from-indigo-500 to-pink-500"></div>

方向ユーティリティ

• bg-linear-to-t - 上方向
• bg-linear-to-tr - 右上方向
• bg-linear-to-r - 右方向
• bg-linear-to-br - 右下方向
• bg-linear-to-b - 下方向
• bg-linear-to-bl - 左下方向
• bg-linear-to-l - 左方向
• bg-linear-to-tl - 左上方向
• bg-linear-<angle> - カスタム角度（例：bg-linear-45）

放射状グラデーション

bg-radial-* ユーティリティを使って、放射状グラデーションを作成します。

<div class="bg-radial from-yellow-400 to-slate-900"></div>
<div class="bg-radial from-purple-200 via-blue-400 to-slate-950"></div>

円錐グラデーション（v4.0 以降）

bg-conic-* ユーティリティを使って、カラーホイールや円形パターンに適した円錐グラデーションを作成します。

<div class="bg-conic-0 from-red-500 to-red-500"></div>
<div class="bg-conic-45 from-blue-400 via-purple-500 to-pink-400"></div>
<div class="bg-conic-[from_45deg] from-slate-400 to-slate-600"></div>

グラデーションのカラーストップ

from-*、via-*、to-* ユーティリティを使って、グラデーションのカラーストップを制御します。

<div class="bg-linear-to-r from-blue-500 to-purple-500"></div>


<div class="bg-linear-to-r from-green-400 via-blue-500 to-purple-600"></div>


<div class="bg-linear-to-r from-blue-500 from-0% to-purple-500 to-100%"></div>

背景画像

bg-[url(...)] を使って、カスタム背景画像を適用します。

<div class="bg-[url(/img/mountains.jpg)]"></div>
<div class="bg-[url(data:image/svg+xml,...)]"></div>

背景サイズ

背景画像のサイズを制御します。

<div class="bg-cover"></div>
<div class="bg-contain"></div>


<div class="bg-[size:10rem]"></div>
<div class="bg-[size:50%]"></div>
<div class="bg-[size:200px_100px]"></div>

背景位置

コンテナー内で背景画像の位置を指定します。

<div class="bg-top-left"></div>
<div class="bg-top"></div>
<div class="bg-top-right"></div>
<div class="bg-left"></div>
<div class="bg-center"></div>
<div class="bg-right"></div>
<div class="bg-bottom-left"></div>
<div class="bg-bottom"></div>
<div class="bg-bottom-right"></div>


<div class="bg-[position:25%_75%]"></div>

背景の繰り返し

背景画像の繰り返しを制御します。

<div class="bg-repeat"></div>
<div class="bg-repeat-x"></div>
<div class="bg-repeat-y"></div>


<div class="bg-no-repeat"></div>

背景ブレンドモード

ブレンドモードを使って、背景色と画像を組み合わせます。

<div class="bg-blue-500 bg-[url(...)] bg-blend-multiply"></div>
<div class="bg-slate-700 bg-[url(...)] bg-blend-overlay"></div>
<div class="bg-amber-400 bg-[url(...)] bg-blend-soft-light"></div>

使用例

不透明度を指定した背景色

<div class="bg-slate-900/50 px-6 py-8 rounded-lg">
  Content with translucent background
</div>

画像に重ねるグラデーション

<div class="bg-[url(/img/hero.jpg)] bg-cover bg-center
           bg-linear-to-br from-black/40 to-transparent
           h-96 flex items-center justify-center">
  <h1 class="text-white text-4xl font-bold">Hero Title</h1>
</div>

複数のカラーストップを持つグラデーション

<div class="bg-linear-to-r
           from-emerald-500 from-0%
           via-blue-500 via-50%
           to-purple-600 to-100%
           h-20 rounded-lg"></div>

円錐グラデーション（カラーホイール）

<div class="w-32 h-32 rounded-full
           bg-conic-0
           from-red-500 via-yellow-500 via-green-500 via-blue-500 via-purple-500 to-red-500"></div>

ブレンドモードを適用した画像

<div class="w-full h-80
           bg-blue-600
           bg-[url(/img/pattern.png)] bg-cover bg-center
           bg-blend-multiply
           rounded-lg"></div>

カスタマイズ

Tailwind の設定を拡張して、背景ユーティリティを追加します。

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      colors: {
        brand: {
          50: 'oklch(0.971 0.013 17.38)',
          500: 'oklch(0.637 0.237 25.331)',
          950: 'oklch(0.258 0.092 26.042)',
        },
      },
      backgroundImage: {
        gradient: 'url(\'/img/gradient.png\')',
      },
    },
  },
}

パフォーマンスのヒント

1. 最適化を向上させるため、16 進数値ではなく カラーのユーティリティ を使います
2. 意図しない繰り返しを防ぐため、bg-no-repeat とサイズ指定を組み合わせます
3. 複雑な効果を作るには、複数の背景ユーティリティを使ってグラデーションを重ねます
4. ツリーシェイキングを向上させるため、rgba の代わりに 不透明度修飾子（/50）を使います
5. ファイルサイズを小さくできる場合は、画像よりも 円錐／放射状グラデーションを優先します

詳細リファレンス

• colors.md - 特定のカラーファミリー、色の段階、OKLCH 値、またはセマンティック／アクセシビリティに配慮した色の組み合わせを選ぶ場合に読み込みます
• gradients.md - 線形／放射状／円錐グラデーションの作成や、カラーストップ位置の調整に取り組む場合に読み込みます
• images.md - 背景画像の適用、サイズ／位置／繰り返しの指定、またはブレンドモードの使用に取り組む場合に読み込みます