PostCSS

SassやSCSSなどのようなCSSを生成する「CSSプリプロセッサ」とは対照に、CSSに対して変換を行うJavaScriptツール。

PostCSS自体が何か変換するというよりもCSSの変換窓口のような立ち位置にあり、PostCSSの豊富なプラグインが個々にそれぞれの目的を持って変換を行う。

代替ツールとしてRust製のLightning CSSがある。PostCSSとの互換性は無い。

プラグイン例

• autoprefixer：ベンダープリフィックスの自動付与
• cssnano：CSSの圧縮
• stylelint：CSSのリンター

Vite + PostCSS

ViteはPostCSSを標準搭載している。

vite.config.jsに設定を記述、あるいはpostcss.config.jsを新しく設置して設定を記述することで使用可能。

Next.js + PostCSS

Next.jsはPostCSSを標準搭載している。

デフォルトで postcss.config.mjs が用意されているためそれに設定を記述する。

Tailwind CSS との関係性

Tailwind CSSはPostCSS用のプラグインを提供している。

ちなみにVite用のプラグインも提供している。（Tailwind CSS v4以降）

Next.jsではPostCSS経由で使用される。

Tailwind CSS

Tailwind CSS v4から自動クラス検出機能が搭載された。

https://tailwindcss.com/docs/detecting-classes-in-source-files

プロジェクト内のファイルを読み取って使用されているクラスを検出するらしい。

これによって面倒な設定無くいい感じに不要なクラスが除去される（どういう仕組み？）

1. PostCSS が @import "tailwindcss"; を検出
2. Tailwind の PostCSS プラグイン（エントリポイント）が呼ばれる
3. Tailwind 本体の初期化関数が呼ばれる（→ 自動スキャン起動）
4. 抽出クラスに基づいて CSS を生成・AST に注入

ChatGPT曰くこんな流れらしい。

実際の自動スキャン処理は Tailwind Oxide が行っているらしいが Rust 製のためよくわからず。

https://www.npmjs.com/package/@tailwindcss/oxide

どこからどこまでのファイルを読み取っているのかも不明。

考えられるとすると

• @import "tailwindcss"; が記述されたCSSファイルのディレクトリ配下
• package.json が存在するディレクトリ配下

もう少し見てみたところTypeScript側でoxideのスキャナーを呼び出していた。

https://github.com/tailwindlabs/tailwindcss/blob/main/packages/%40tailwindcss-postcss/src/index.ts

let base = opts.base ?? process.cwd()

// sourceに入る値
return [{ base, pattern: '**/*', negated: false }]

context.scanner = new Scanner({ sources })

これを見る限りだと作業ディレクトリ配下のファイルが対象になる。

npm run build のように npm run コマンドはどこで呼び出しても作業ディレクトリが package.json のあるディレクトリになるため、「package.json が存在するディレクトリ配下」がクラス検出の範囲になりそう。

試しに package.json と同じディレクトリに test.json を作って

{
    "test": "text-orange-500"
}

とかいて npm run build したところ、確かに出力される CSS にも text-orange-500 が含まれていた。