IT 技書の森

Tailwind CSS

ユーティリティファーストの CSS フレームワークで、クラス名の組み合わせでスタイルを構築する

CSSフロントエンド

Tailwind CSS とは

Tailwind CSS は、bg-blue-500、text-lg、flex、gap-4 のようなユーティリティクラスを HTML に直接記述してスタイルを構築する CSS フレームワークである。Adam Wathan が 2017 年に開発し、フロントエンド開発で最も人気のある CSS フレームワークになった。

従来の CSS との比較

<!-- 従来の CSS: セマンティックなクラス名 + 別ファイルのスタイル -->
<button class="primary-button">Click</button>
<style>
.primary-button { background: #3b82f6; color: white; padding: 8px 16px; border-radius: 4px; }
.primary-button:hover { background: #2563eb; }
</style>

<!-- Tailwind: ユーティリティクラスを直接記述 -->
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Click</button>

メリットとデメリット

メリット デメリット
CSS ファイルを別途管理しない HTML が冗長になる
デザインの一貫性 (トークンベース) 学習コスト (クラス名の暗記)
未使用 CSS が自動除去 (小さなバンドル) 複雑なスタイルは @apply が必要
レスポンシブが直感的 (md:flex) カスタムデザインには設定が必要

レスポンシブデザイン

<!-- モバイル: 1列、タブレット: 2列、デスクトップ: 3列 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="bg-white p-4 rounded shadow">Card 1</div>
  <div class="bg-white p-4 rounded shadow">Card 2</div>
  <div class="bg-white p-4 rounded shadow">Card 3</div>
</div>

md: (768px 以上)、lg: (1024px 以上) のプレフィックスでブレークポイントを指定する。モバイルファーストで、プレフィックスなしがモバイルのスタイルだ。

Tailwind v4 の変更点

Tailwind v4 (2024 年) で大幅な変更があった。

  • tailwind.config.js が不要に (CSS ファイルで設定)
  • Oxide エンジンで 10 倍高速なビルド
  • CSS ネイティブの @theme ディレクティブ
/* Tailwind v4: CSS ファイルで設定 */
@import "tailwindcss";
@theme {
  --color-primary: #3b82f6;
  --font-sans: 'Inter', sans-serif;
}

Bootstrap との比較

観点 Tailwind Bootstrap
アプローチ ユーティリティファースト コンポーネントベース
カスタマイズ 高い (設定ファイル) 中程度 (変数の上書き)
バンドルサイズ 小さい (未使用を除去) 大きい (全コンポーネント)
デザインの自由度 高い Bootstrap らしい見た目になりがち

Next.js との統合

Next.js は Tailwind CSS をゼロコンフィグでサポートする。create-next-app で Tailwind を選択すると自動設定される。

より深く学ぶには関連書籍が役立つ。

関連用語