PostCSSってなに?Tailwind CSSで触れた範囲のメモ
React(Vite)プロジェクトで Tailwind CSS を導入したとき、
postcss.config.js というファイルを見かけました。
Tailwind CSS と PostCSS の関係を中心に軽く整理しておきます。
PostCSSとは?
PostCSSは、CSSをJavaScriptで変換・最適化するためのツールらしいです。
CSSをそのまま書くのではなく、プラグインを通して「構文の変換」、「自動最適化」、「プレフィックス付与」などを行います。
たとえば:
| プラグイン名 | 役割 |
|---|---|
| autoprefixer | ベンダープレフィックス(-webkit-など)を自動付与 |
| postcss-nesting | ネスト構文(入れ子書き)を使えるようにする |
| cssnano | CSSを圧縮・最適化する |
Tailwind CSSとPostCSSの関係
Tailwind CSSもPostCSSのプラグインの一つです。
Tailwind CSS は、@tailwind や @apply などの独自構文を
通常のCSSに変換して最終的なCSSに書き換える必要があります。
この「書き換える処理」を実際に行っているのが PostCSS です。
Tailwind CSS は PostCSS に「自分のルールを使ってCSSを変換してね」と登録されています。
そのため、ビルド時には PostCSS が Tailwind CSS のルールを使って、
CSSファイルを最終的な形に変換します。