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 は必須ではなくなった