Autoprefixer がベンダープレフィックスを付けてくれない

要約

Autoprefixer を入れたのに -webkit- などが出力されないのは、多くの場合「そのブラウザではもう不要」と判断されているためです。
Autoprefixer は Browserslist で決まった対象ブラウザと Can I Use のデータを突き合わせ、必要なプレフィックスだけを足します。

まず対象ブラウザを確認します。

npx browserslist

よくある原因

1. 対象ブラウザが新しい: 公式リポジトリは「If Autoprefixer doesn't add prefixes to your CSS, check if they're still required on Can I Use」と説明している。
   プレフィックスが不要になったプロパティには何も付かない。
2. プラグインが登録されていない: postcss.config.js の plugins に autoprefixer が無ければ当然動かない。
   Tailwind CSS を入れた流れで PostCSS が有効になっているだけの構成では、登録漏れが起きやすい。
3. 設定ファイルが読まれていない: ESM プロジェクトで設定が評価できずに落ちているケースがある。
   詳しくは /postcss/config-not-loaded-esm/ を参照。
4. プレフィックスの問題ではない: 対象ブラウザがその機能自体に未対応の場合、プレフィックスを足しても動かない。
   Autoprefixer は機能を実装するツールではない。

解決策

1. 対象ブラウザを表示して確かめる

設定を疑う前に、いま何を対象にしているかを見ます。

npx browserslist

chrome 140 のような最新版しか出てこなければ、プレフィックスが付かないのは正常な動作です。

2. browserslist で対象を明示する

公式は、Autoprefixer のオプションより Browserslist の設定ファイルを使うことを推奨しています。
ここに書いた対象は Babel の @babel/preset-env とも共有されます。

# .browserslistrc
> 0.5%
last 2 versions
not dead

package.json に置く場合は次のようになります。

{
  "browserslist": ["> 0.5%", "last 2 versions", "not dead"]
}

3. プラグイン登録を確認する

設定ファイルに autoprefixer が入っているか、順番も含めて確認します。
Autoprefixer は他のプラグインが生成した CSS にもプレフィックスを付けるため、変換系プラグインより後ろに置きます。

// postcss.config.js
export default {
  plugins: {
    "postcss-preset-env": {},
    autoprefixer: {},
  },
};

4. Autoprefixer 単体で出力を確かめる

ビルドの中で見えにくいときは、小さな CSS を直接処理して切り分けます。

npx postcss --use autoprefixer --no-map -o /dev/null src/app.css

overrideBrowserslist を使えば、その場だけ古い対象を指定して差分を確認できます。
ただし公式は本番設定としては推奨していないので、切り分け用にとどめます。

// 切り分け専用
import autoprefixer from "autoprefixer";
 
export default {
  plugins: [autoprefixer({ overrideBrowserslist: ["ie 11"] })],
};