フロントエンド - CSS・スタイリング

Tailwind CSS ているうぃんどしーえすえす

ユーティリティファーストCSSフレームワーククラス名レスポンシブデザインJITデザインシステム

Tailwind CSSについて教えて

簡単に言うとこんな感じ！

HTMLに「text-red-500」「mt-4」みたいな短い名前のクラスをペタペタ貼るだけでスタイルが決まるCSSの道具箱だよ！自分でCSSを1行も書かなくてもデザインが完成しちゃうのが最大の特徴なんだ！

Tailwind CSSとは

Tailwind CSSは、2017年にAdam Wathan氏らが開発したユーティリティファースト（Utility-First）アプローチのCSSフレームワークです。「ユーティリティ」とは「余白を4px開ける」「文字を赤くする」などの一つの機能に特化した小さなCSSクラスのことで、これらを組み合わせてデザインを組み立てていきます。

従来のCSSフレームワーク（例：Bootstrap）は「ボタン」「カード」などの完成品コンポーネントを提供する方式でした。Tailwindはこれとは逆に、完成品を提供せず、材料（ユーティリティクラス）だけを大量に提供します。料理に例えると「できあいのお弁当」ではなく「調味料と食材の棚」を渡される感じです。

2021年にリリースされたv3でJIT（Just-In-Time）コンパイルが標準になり、使ったクラスだけをビルド時に生成する仕組みで、CSSファイルのサイズが劇的に小さくなりました。現在はReact・Vue・Next.jsなどモダンなフロントエンド開発の現場で広く採用されています。

ユーティリティファーストの仕組み

従来の書き方とTailwindの書き方を並べて比べてみましょう。

従来のCSS vs Tailwind CSS

<!-- 従来の書き方：CSSファイルに別途スタイルを書く -->
<div class="card">こんにちは</div>

<style>
.card {
  background-color: white;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  font-size: 14px;
  color: #333;
}
</style>

<!-- Tailwindの書き方：クラスを直接HTMLに書くだけ -->
<div class="bg-white p-4 rounded-lg shadow text-sm text-gray-700">
  こんにちは
</div>

よく使うユーティリティクラス早見表

カテゴリ	クラス例	意味
余白（マージン）	`mt-4` / `mb-2` / `mx-auto`	上に16px / 下に8px / 左右中央寄せ
余白（パディング）	`p-4` / `px-6` / `py-2`	全方向16px / 左右24px / 上下8px
文字色	`text-red-500` / `text-gray-900`	赤 / ほぼ黒
背景色	`bg-blue-100` / `bg-white`	薄い青 / 白
文字サイズ	`text-sm` / `text-xl` / `text-3xl`	小 / やや大 / 特大
角丸	`rounded` / `rounded-lg` / `rounded-full`	少し / 大きく / 円形
Flexbox	`flex` / `items-center` / `justify-between`	横並び / 縦中央 / 両端揃え
レスポンシブ	`md:text-lg` / `lg:flex`	中画面以上で適用

覚え方：数字は「×4px」が基本

Tailwindの数値スケールは基本的に数字×4pxです。p-1=4px、p-2=8px、p-4=16px、p-8=32px。「4の倍数」と覚えると数字の感覚がつかみやすくなります。色の数字（red-500など）は100〜900で数字が大きいほど濃い色になります。

レスポンシブ対応：プレフィックスをつけるだけ

<!-- スマホは縦並び、タブレット以上は横並びにする例 -->
<div class="flex flex-col md:flex-row">
  <div class="w-full md:w-1/2">左カラム</div>
  <div class="w-full md:w-1/2">右カラム</div>
</div>

sm: md: lg: xl: というプレフィックスをクラスの前につけるだけで、画面幅ごとの分岐が書けます。

歴史と背景

2017年 — Adam Wathan、Steve Schoger らが Tailwind CSS を公開。「ユーティリティファースト」というアプローチを提唱し始める
2019年 — v1.0 正式リリース。コミュニティが急速に拡大
2020年 — v2.0 リリース。ダークモード対応・カラーパレット刷新。npmダウンロード数が急増し主要フレームワークとして認知される
2021年 — JIT（Just-In-Time）モードを標準搭載したv3.0リリース。ビルド時に使ったクラスだけ生成するため、CSS出力が数KB〜数十KBに抑えられるようになった
2022〜2023年 — Next.js・Nuxt・SvelteKitなど主要フレームワークの公式テンプレートにTailwindが標準採用されるケースが増加
2024年 — v4アルファ版が公開。設定ファイルをCSS内に統合する新アーキテクチャへの移行が進む

他のCSSアプローチとの比較

Tailwindの立ち位置を整理するために、代表的なCSSアプローチと比較します。

主要CSSフレームワーク比較表

比較項目	Tailwind CSS	Bootstrap	CSS-in-JS
アプローチ	ユーティリティファースト	コンポーネント提供	JS内にCSS記述
HTML	クラスが多くなる	比較的すっきり	すっきり
デザインの自由度	高い	低め	高い
バンドルサイズ	小（JITで最適化）	中〜大	小〜中
学習コスト	中（クラス名を覚える）	低	高
向いている用途	独自デザイン・SPA	社内ツール・プロトタイプ	大規模React開発

`tailwind.config.js`：設定ファイルで自社カラーを登録

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#003087',   // 自社のコーポレートカラーを登録
        'brand-orange': '#f97316',
      },
      fontFamily: {
        sans: ['Noto Sans JP', 'sans-serif'], // 日本語フォントを指定
      },
    },
  },
}

この設定を書くと text-brand-blue bg-brand-orange といったクラスが使えるようになります。デザインガイドラインに沿った色・フォントをプロジェクト全体で一元管理できます。