背景・ボーダー・シャドウ

この章では、Tailwind CSS で背景、ボーダー、シャドウをスタイリングする方法を学びます。

背景色

<div class="bg-white">白</div>
<div class="bg-gray-100">薄いグレー</div>
<div class="bg-blue-500">青</div>
<div class="bg-transparent">透明</div>

背景画像

グラデーション

<!-- 線形グラデーション -->
<div class="bg-linear-to-r from-blue-500 to-purple-500">
  右へのグラデーション
</div>

<!-- 方向の指定 -->
<div class="bg-linear-to-t">上へ</div>
<div class="bg-linear-to-tr">右上へ</div>
<div class="bg-linear-to-r">右へ</div>
<div class="bg-linear-to-br">右下へ</div>
<div class="bg-linear-to-b">下へ</div>
<div class="bg-linear-to-bl">左下へ</div>
<div class="bg-linear-to-l">左へ</div>
<div class="bg-linear-to-tl">左上へ</div>

3 色グラデーション

<div class="bg-linear-to-r from-pink-500 via-red-500 to-yellow-500">
  3 色グラデーション
</div>

グラデーションの開始・終了位置

<div class="bg-linear-to-r from-blue-500 from-10% via-purple-500 via-50% to-pink-500 to-90%">
  位置を指定したグラデーション
</div>

画像の背景

<div class="bg-[url('/image.jpg')]">
  背景画像
</div>

背景のサイズ・位置・繰り返し

サイズ

<div class="bg-cover">カバー (はみ出し許容)</div>
<div class="bg-contain">コンテイン (収まる)</div>
<div class="bg-auto">自動</div>

位置

<div class="bg-center">中央</div>
<div class="bg-top">上</div>
<div class="bg-right">右</div>
<div class="bg-bottom">下</div>
<div class="bg-left">左</div>
<div class="bg-top-left">左上</div>

繰り返し

<div class="bg-repeat">繰り返し</div>
<div class="bg-no-repeat">繰り返しなし</div>
<div class="bg-repeat-x">横のみ繰り返し</div>
<div class="bg-repeat-y">縦のみ繰り返し</div>

固定

<div class="bg-fixed">スクロールで固定</div>
<div class="bg-local">スクロールで追従</div>
<div class="bg-scroll">デフォルト</div>

ボーダー

太さ

<div class="border">1px</div>
<div class="border-0">0px</div>
<div class="border-2">2px</div>
<div class="border-4">4px</div>
<div class="border-8">8px</div>

個別の辺

<div class="border-t-2">上</div>
<div class="border-r-2">右</div>
<div class="border-b-2">下</div>
<div class="border-l-2">左</div>
<div class="border-x-2">左右</div>
<div class="border-y-2">上下</div>

色

<div class="border border-gray-300">グレー</div>
<div class="border border-blue-500">青</div>
<div class="border border-transparent">透明</div>

スタイル

<div class="border border-solid">実線</div>
<div class="border border-dashed">破線</div>
<div class="border border-dotted">点線</div>
<div class="border border-double">二重線</div>
<div class="border-none">なし</div>

角丸 (Border Radius)

基本

<div class="rounded-sm">小さい角丸</div>
<div class="rounded-md">中程度</div>
<div class="rounded-lg">大きい</div>
<div class="rounded-xl">より大きい</div>
<div class="rounded-2xl">さらに大きい</div>
<div class="rounded-3xl">かなり大きい</div>
<div class="rounded-4xl">最大</div>
<div class="rounded-full">円形</div>
<div class="rounded-none">なし</div>

クラス	サイズ
rounded-xs	2px
rounded-sm	4px
rounded-md	6px
rounded-lg	8px
rounded-xl	12px
rounded-2xl	16px
rounded-3xl	24px
rounded-4xl	32px

v4 で scale がリネーム

v4 では角丸・シャドウ・ぼかしの scale が 1 段ずれてリネームされました。例えば v3 の rounded は rounded-sm に、shadow は shadow-sm になります（rounded-sm → rounded-xs、shadow-sm → shadow-xs も同様）。bare の rounded / shadow は後方互換で残りますが、本ガイドは v4 の名前で統一しています。

個別の角

<div class="rounded-t-lg">上の角</div>
<div class="rounded-r-lg">右の角</div>
<div class="rounded-b-lg">下の角</div>
<div class="rounded-l-lg">左の角</div>
<div class="rounded-tl-lg">左上のみ</div>
<div class="rounded-tr-lg">右上のみ</div>
<div class="rounded-br-lg">右下のみ</div>
<div class="rounded-bl-lg">左下のみ</div>

シャドウ

ボックスシャドウ

<div class="shadow-xs">小さいシャドウ</div>
<div class="shadow-sm">標準シャドウ</div>
<div class="shadow-md">中程度</div>
<div class="shadow-lg">大きい</div>
<div class="shadow-xl">より大きい</div>
<div class="shadow-2xl">最大</div>
<div class="shadow-none">なし</div>

インナーシャドウ

<div class="inset-shadow-sm">内側シャドウ</div>

シャドウの色

<div class="shadow-lg shadow-blue-500/50">
  青いシャドウ (50% 透明)
</div>
<div class="shadow-lg shadow-red-500/30">
  赤いシャドウ (30% 透明)
</div>

リング (アウトライン)

フォーカス時のリングスタイルに便利です。

<div class="ring-2 ring-blue-500">青いリング</div>
<div class="ring-4 ring-offset-2 ring-blue-500">オフセット付き</div>

リングの幅

<div class="ring-0">0px</div>
<div class="ring-1">1px</div>
<div class="ring-2">2px</div>
<div class="ring-3">3px (v3 の bare ring 相当)</div>
<div class="ring-4">4px</div>
<div class="ring-8">8px</div>
<div class="ring">1px (デフォルト。v3 の 3px から変更)</div>

リングオフセット

<div class="ring-2 ring-offset-2 ring-blue-500">
  リングとの間に 2px の隙間
</div>
<div class="ring-2 ring-offset-4 ring-blue-500">
  リングとの間に 4px の隙間
</div>

ダークモードとリングオフセット

リングオフセットはデフォルトで白 (#fff) の実線で塗られます。背景が白以外の場合やダークモード対応時は ring-offset-white dark:ring-offset-gray-900 のように、背景色に合わせた ring-offset-color の指定を忘れないようにしましょう。

リングの内側

<div class="ring-2 ring-inset ring-blue-500">
  内側にリング
</div>

アウトライン

<button class="outline-2 outline-blue-500">
  アウトライン
</button>
<button class="outline-2 outline-offset-2 outline-blue-500">
  オフセット付き
</button>

分割線 (Divide)

子要素間に分割線を追加します。

<div class="divide-y divide-gray-300">
  <div class="py-4">アイテム 1</div>
  <div class="py-4">アイテム 2</div>
  <div class="py-4">アイテム 3</div>
</div>

<div class="flex divide-x divide-gray-300">
  <div class="px-4">アイテム 1</div>
  <div class="px-4">アイテム 2</div>
  <div class="px-4">アイテム 3</div>
</div>

分割線のスタイル

<div class="divide-y divide-dashed">破線</div>
<div class="divide-y divide-dotted">点線</div>

実践例

カードコンポーネント

<div class="bg-white rounded-xl shadow-lg overflow-hidden">
  <img src="..." class="w-full h-48 object-cover" />
  <div class="p-6">
    <h3 class="text-xl font-bold">カードタイトル</h3>
    <p class="mt-2 text-gray-600">説明文...</p>
  </div>
</div>

インプットフィールド

<input
  type="text"
  class="w-full px-4 py-2 border border-gray-300 rounded-lg
         focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-transparent"
  placeholder="入力してください"
/>

ボタンのバリエーション

<!-- ソリッド -->
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg shadow-md
               hover:bg-blue-600 hover:shadow-lg transition-all">
  ソリッド
</button>

<!-- アウトライン -->
<button class="px-4 py-2 border-2 border-blue-500 text-blue-500 rounded-lg
               hover:bg-blue-50 transition-colors">
  アウトライン
</button>

<!-- ゴースト -->
<button class="px-4 py-2 text-blue-500 rounded-lg
               hover:bg-blue-50 transition-colors">
  ゴースト
</button>

ヒーローセクション

<section class="bg-linear-to-br from-blue-600 via-purple-600 to-pink-500
                text-white py-24 px-4">
  <div class="max-w-4xl mx-auto text-center">
    <h1 class="text-5xl font-bold">ヒーローセクション</h1>
    <p class="mt-6 text-xl opacity-90">
      美しいグラデーション背景のセクション
    </p>
  </div>
</section>

リスト

<ul class="bg-white rounded-lg shadow divide-y divide-gray-200">
  <li class="px-4 py-3 hover:bg-gray-50">アイテム 1</li>
  <li class="px-4 py-3 hover:bg-gray-50">アイテム 2</li>
  <li class="px-4 py-3 hover:bg-gray-50">アイテム 3</li>
</ul>

まとめ

• bg-* で背景色、bg-linear-to-* でグラデーション
• border / border-* でボーダー
• rounded-* で角丸
• shadow-* でシャドウ
• ring-* でフォーカスリング
• divide-* で子要素間の分割線

次に読む

• サイジングと配置 — width / height / position / z-index の体系
• 状態バリアント — hover: focus: でインタラクティブにする
• Tailwind CSS ガイド 目次 — 全 18 章の構成に戻る