PostCSS と Tailwind CSS の関係を「料理人とフライパン」で理解する
はじめに
Next.js プロジェクトで Dependabot から postcss のアップデート PR が飛んできたとき、「そもそも postcss って何？」となったことがきっかけで調べました。Tailwind CSS を使っているのに、その裏側の仕組みをちゃんと理解していなかったので、整理してみます。
（※ この記事は Tailwind CSS v3 系を前提とした説明です。v4（2025年1月リリース）では Rust 製の Oxide エンジンに移行し、PostCSS への依存度が大きく変わっています。）
PostCSS とは
PostCSS は CSS を変換・処理するための JavaScript ツールです。
名前に "CSS" が入っているので CSS のファイルかと思いがちですが、実体は Node.js 上で動く JS ライブラリです。
元のCSS → PostCSS → 変換後のCSS（ブラウザが解釈できる形）
単体では何もせず、プラグインを組み合わせて使うのが特徴です。
Tailwind CSS とは
Tailwind CSS は、あらかじめ用意されたクラス名を HTML に書くだけでスタイリングできる CSS フレームワークです。
普通の CSS:
.button {
background-color: blue;
padding: 8px 16px;
}
Tailwind CSS:
<button class="bg-blue-500 px-4 py-2">ボタン</button>
bg-blue-500（背景を青に）、px-4（横の余白）といった短いクラス名が大量に用意されており、それを組み合わせてスタイリングします。
両者の関係
ここが本題です。
Tailwind CSS は PostCSS のプラグインとして動く
PostCSS（基盤・器）
└── Tailwind プラグイン（PostCSS の中で動く）
開発者が bg-blue-500 と書いたとき、内部では以下のことが起きています。
開発者が HTML に bg-blue-500 と書く
↓
Tailwind プラグイン（JS）が
「.bg-blue-500 { background-color: #3b82f6; }」というCSSを生成
↓
PostCSS がそれをブラウザ互換のCSSに整形・最適化
↓
ブラウザが受け取る
役割の違い
| 役割 | |
|---|---|
| Tailwind プラグイン | 「クラス名 → CSS」の翻訳 |
| PostCSS | 翻訳結果を整形・最適化するパイプライン基盤 |
料理人とフライパンで例えると
この関係を一番わかりやすく表現すると：
| 例え | 実体 |
|---|---|
| フライパン工場 | PostCSS 開発チーム（Andrey Sitnik） |
| 料理人 | Tailwind Labs（Adam Wathan 率いるチーム） |
| 料理 | クラス名をCSSに変換する仕組み |
| 食べる人 | Tailwind を使っている開発者 |
Tailwind Labs は PostCSS という変換器（フライパン）を活用して、クラス名をCSSに変換する仕組みを作っています。フライパンを作った人と料理人は別の人ですが、料理人はフライパンなしでは料理できません。
作者も別々
| ツール | 作者 |
|---|---|
| PostCSS | Andrey Sitnik（ロシア人開発者） |
| Tailwind CSS | Adam Wathan（カナダ人）率いる Tailwind Labs |
Tailwind Labs は PostCSS を「既存のツールとして利用している」だけで、PostCSS 自体を開発しているわけではありません。
なぜ dev 依存関係なのか
postcss は devDependencies に入っています。これはビルド時にのみ動くツールだからです。
- 開発・ビルド時: PostCSS + Tailwind が動いてCSSを生成する
- 本番サイト: 生成済みのCSSが配信されるだけ（PostCSS は不要）
完成した料理を食べるのにフライパンは不要、というわけです。
（おまけ）Tailwind v4 では、関係性が変わりました
ここまでの説明は Tailwind v3 系までの話です。2025年1月にリリースされた Tailwind CSS v4 では、内部アーキテクチャが大きく変わりました。
何が変わったか
| v3 まで | v4 | |
|---|---|---|
| エンジン | JavaScript ベース | Rust 製の Oxide エンジン |
| CSS 処理基盤 | PostCSS + autoprefixer | Lightning CSS |
| 統合方法 | PostCSS プラグイン一択 | Vite / PostCSS / CLI の3択 |
tailwindcss パッケージ |
それ自体が PostCSS プラグイン | PostCSS プラグインは @tailwindcss/postcss に分離 |
使い方が3パターンに増えた
v4 では Tailwind を組み込む方法が3つに増えました。
-
@tailwindcss/vite（推奨・最速）: Vite と直接連携 -
@tailwindcss/postcss: 従来の PostCSS パイプラインとの互換用 - スタンドアロン CLI: バンドラなしでも使える
つまり v4 では、「Tailwind = PostCSS プラグイン」という前提が必須ではなくなったということです。料理人が長年使ってきたフライパン（PostCSS）を卒業して、自前の Rust 製鉄板（Oxide）を持ち込んだ、というイメージです。
色の値も変わった
冒頭で例に出した bg-blue-500 の値も、v4 では OKLCH 色空間に移行しています。
/* v3 */
.bg-blue-500 { background-color: #3b82f6; }
/* v4 */
.bg-blue-500 { background-color: oklch(62.3% 0.214 259.815); }
まとめ
- PostCSS = CSSを変換する JS 製の基盤ツール（フライパン）
- Tailwind CSS = PostCSS のプラグインとして動く CSS フレームワーク（料理）
- Tailwind Labs は PostCSS という変換器を活用してクラス名→CSS変換の仕組みを作っている
- Tailwind は「後に動く」のではなく「PostCSS の中で動く」
- ただし Tailwind v4 では Oxide エンジン（Rust製）と Lightning CSS に置き換わり、PostCSS は必須ではなくなった