PostCSS

別名: postcss.config.js / ポストシーエスエス

CSS を AST（構文木）へ変換し、JavaScript のプラグインで書き換えてから CSS として出力するツール。
Tailwind CSS や Autoprefixer はこのプラグインとして動く。

#postcss #css #tailwindcss #build #plugin

公開: 2026-07-31

定義

PostCSS は、CSS を抽象構文木（AST）にパースし、JavaScript で書かれたプラグインに書き換えさせ、再び CSS として出力するツールです。
PostCSS 自体は変換ルールを持たず、何をするかはすべてプラグイン側が決めます。Tailwind CSS や Autoprefixer は、この仕組みの上で動くプラグインです。

詳細

設定はプロジェクト直下の postcss.config.js（.mjs / .cjs も可）に書き、使うプラグインを列挙します。

export default {
  plugins: {
    "@tailwindcss/postcss": {},
    autoprefixer: {},
  },
};

Vite や Next.js は内部で PostCSS を呼ぶため、この設定ファイルを置くだけでビルドパイプラインに組み込まれます。
逆に言うと、設定ファイルの位置やプラグイン名が違うとプラグインは静かに素通りし、CSS が変換されないまま出力されます。
Tailwind CSS v4 では PostCSS プラグインが tailwindcss から @tailwindcss/postcss へ切り出されており、この名前の変更が移行時の定番のつまずきです。

よくある誤解

PostCSS は CSS プリプロセッサである: Sass のような独自言語ではありません。
入力も出力も CSS で、間に JavaScript の変換を挟むだけです。
PostCSS を入れれば Tailwind が動く: PostCSS は器で、Tailwind のプラグインを plugins に登録して初めて動きます。

定義

詳細

よくある誤解

関連