Tailwind CSSの実践テクニック｜よく使うパターン集【2026年版】

この記事の対象: Tailwind CSSを実務で使いこなしたいフロントエンドエンジニア
読了時間: 約7分

Tailwind CSSはユーティリティファーストのCSSフレームワークで、2026年現在、フロントエンド開発のデファクトスタンダードの1つになっています。この記事では、実務で頻繁に使うUIパターン10選をTailwind CSSのコードで紹介します。

Tailwind CSSとは（おさらい）

HTMLのclass属性にユーティリティクラスを直接記述してスタイリングするアプローチです。bg-blue-500、text-white、p-4のような短いクラスを組み合わせてUIを構築します。

メリット: カスタムCSSを書く量が激減、命名規則の悩みがなくなる、デザインシステムとの親和性が高い

よく使うパターン10選

①レスポンシブナビゲーション

<nav class="flex items-center justify-between p-4 bg-white shadow-sm">
  <a href="/" class="text-xl font-bold">Logo</a>
  <div class="hidden md:flex gap-6">
    <a href="#" class="text-gray-600 hover:text-gray-900">About</a>
    <a href="#" class="text-gray-600 hover:text-gray-900">Services</a>
    <a href="#" class="text-gray-600 hover:text-gray-900">Contact</a>
  </div>
  <button class="md:hidden">☰</button>
</nav>

②ヒーローセクション

<section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-600 to-purple-700 text-white px-4">
  <div class="text-center max-w-2xl">
    <h1 class="text-4xl md:text-6xl font-bold mb-6">キャッチコピー</h1>
    <p class="text-lg md:text-xl mb-8 opacity-90">サブコピーテキスト</p>
    <a href="#" class="inline-block bg-white text-blue-600 px-8 py-3 rounded-full font-bold hover:bg-gray-100 transition">CTA</a>
  </div>
</section>

③カードコンポーネント

<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
  <img src="/image.jpg" alt="" class="w-full h-48 object-cover">
  <div class="p-6">
    <span class="text-sm text-blue-600 font-medium">カテゴリ</span>
    <h3 class="text-lg font-bold mt-1 mb-2">タイトル</h3>
    <p class="text-gray-600 text-sm">説明テキスト...</p>
  </div>
</div>

④フォーム

<form class="space-y-4 max-w-md">
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">お名前</label>
    <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition">
  </div>
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">メール</label>
    <input type="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition">
  </div>
  <button class="w-full bg-blue-600 text-white py-3 rounded-lg font-bold hover:bg-blue-700 transition">送信</button>
</form>

⑤フッター

<footer class="bg-gray-900 text-gray-400 py-12 px-4">
  <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
    <div>
      <h4 class="text-white font-bold mb-4">会社名</h4>
      <p class="text-sm">会社の説明テキスト</p>
    </div>
    <div>
      <h4 class="text-white font-bold mb-4">リンク</h4>
      <ul class="space-y-2 text-sm">
        <li><a href="#" class="hover:text-white transition">About</a></li>
        <li><a href="#" class="hover:text-white transition">Services</a></li>
      </ul>
    </div>
    <div>
      <h4 class="text-white font-bold mb-4">お問い合わせ</h4>
      <p class="text-sm">info@example.com</p>
    </div>
  </div>
</footer>

⑥グラスモーフィズムカード

<div class="bg-white/30 backdrop-blur-lg border border-white/20 rounded-2xl p-8 shadow-xl">
  <h3 class="text-xl font-bold">グラスモーフィズム</h3>
  <p class="mt-2 text-gray-700">半透明のガラス風カード</p>
</div>

⑦ダークモード対応

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-6 rounded-lg">
  <h3 class="font-bold">ダークモード対応</h3>
  <p class="text-gray-600 dark:text-gray-400">dark:プレフィックスで切り替え</p>
</div>

⑧アニメーション

<div class="animate-bounce">バウンス</div>
<div class="animate-pulse">パルス</div>
<div class="animate-spin">スピン</div>
<div class="hover:scale-105 transition-transform duration-300">ホバー拡大</div>

⑨グリッドレイアウト

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- カードを繰り返し配置 -->
</div>

⑩モーダル

<div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
  <div class="bg-white rounded-2xl p-8 max-w-md w-full mx-4 shadow-2xl">
    <h3 class="text-xl font-bold mb-4">モーダルタイトル</h3>
    <p class="text-gray-600 mb-6">モーダルの内容</p>
    <button class="w-full bg-blue-600 text-white py-2 rounded-lg">閉じる</button>
  </div>
</div>

Tailwind CSS v4の新機能

2025年にリリースされたv4では以下の変更が加わっています。

設定ファイル不要: tailwind.config.jsなしでも利用可能
CSSベースの設定: 設定をCSS内の@themeで定義
パフォーマンス向上: ビルド速度が大幅に改善
新しいユーティリティ: Container Queries対応クラスなど

まとめ

Tailwind CSSのポイントをまとめます。

ユーティリティクラスの組み合わせでUIを高速に構築
レスポンシブ: sm: md: lg: プレフィックスで対応
ダークモード: dark: プレフィックスで対応
v4で設定ファイル不要、パフォーマンス向上