Tech Starlog

Laravel × Tailwind CSS 基本の使い方

投稿日：2026/01/23

Laravelでは、Breeze / Jetstream などのスターターキットを使うことで、Tailwind CSSが自動的に導入されます。 本記事では、すでにTailwindが利用できる状態を前提に、基本的な使い方と実務でよく使うパターンを解説します。

Tailwind CSSの基本思想

Tailwind CSSは、ユーティリティクラスを組み合わせてUIを構築するCSSフレームワークです。

<button class="bg-blue-600 text-white px-4 py-2 rounded">
    保存
</button>

従来のようにCSSファイルにクラスを書くのではなく、

  • 色
  • 余白
  • サイズ
  • レイアウト
  • 状態（hover / focus）

をHTML側で組み立てます。

よく使う基本クラス

余白（margin / padding）

<div class="p-4 m-2">
    コンテンツ
</div>
クラス 意味
p-4 全方向padding
px-4 左右padding
py-2 上下padding
m-2 全方向margin
mt-4 上margin

文字サイズ・色

<h1 class="text-xl font-bold text-gray-800">
    タイトル
</h1>
クラス 意味
text-sm / text-lg / text-xl 文字サイズ
font-bold 太字
text-gray-800 文字色

背景・枠線

<div class="bg-white border border-gray-200 rounded">
    ボックス
</div>

横並びレイアウト（Flex）

<div class="flex items-center justify-between">
    <span>タイトル</span>
    <button>編集</button>
</div>
クラス 意味
flex 横並び
items-center 縦中央揃え
justify-between 左右に配置

グリッドレイアウト（Grid）

<div class="grid grid-cols-3 gap-4">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

ボタンの基本パターン

<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">
    保存
</button>

ポイント：

  • hover: でホバー時の状態指定
  • 色は blue-600 など段階指定
  • rounded で角丸

フォームの基本パターン

<input
    type="text"
    class="border border-gray-300 rounded px-3 py-2 w-full focus:outline-none focus:ring focus:ring-blue-300"
/>

よく使う状態指定：

プレフィックス 意味
hover: ホバー時
focus: フォーカス時
disabled: 無効時

レスポンシブ対応

画面サイズに応じてクラスを切り替えられます。

<div class="text-sm md:text-base lg:text-lg">
    レスポンシブ文字サイズ
</div>
プレフィックス 画面幅
sm 640px〜
md 768px〜
lg 1024px〜
xl 1280px〜

Bladeと組み合わせる実践例

一覧画面のカードUI例

<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    @foreach ($posts as $post)
        <div class="border rounded p-4 shadow">
            <h2 class="font-bold text-lg mb-2">
                {{ $post->title }}
            </h2>
            <p class="text-gray-600 text-sm">
                {{ Str::limit($post->body, 100) }}
            </p>
        </div>
    @endforeach
</div>

Bladeコンポーネント化

同じデザインを何度も書く場合は、Bladeコンポーネント化すると保守性が上がります。

<x-primary-button>
    保存
</x-primary-button>

UIルールの統一にも効果的です。

よくあるつまずきポイント

クラスが反映されない

  • Viteが起動していない
  • キャッシュが残っている

まずは npm run dev が動いているか確認します。

クラスが長くなりすぎる

class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded shadow text-sm"

→ コンポーネント化で解消します。

実務での設計ポイント

  • 色・余白ルールをチームで統一する
  • ボタン・フォームは必ずコンポーネント化
  • レスポンシブは最初から設計する
  • ダークモード対応を考慮する

まとめ

  • TailwindはHTMLだけでデザインが完結する
  • ユーティリティクラスを組み合わせるだけでUI構築できる
  • Bladeとの相性が非常に良い
  • コンポーネント化が保守性の鍵
⬅️ 記事一覧へ戻る