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

要約

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

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

npx browserslist

実行例

実際に上記の手順を node:20 で動かすと、対象が chrome 154 だけのときは user-select と backdrop-filter に何も付かず、.browserslistrc に safari 15 と chrome 90 を書くと -webkit- が両方に付く。plugins を空にすると、対象がそのままでもプレフィックスは付かず入力どおりに出力される。

$ npx browserslist
chrome 154

$ npx postcss src/app.css
.label {
  user-select: none;
  backdrop-filter: blur(4px);
}

$ npx browserslist
chrome 90
safari 15

$ npx postcss src/app.css
.label {
  -webkit-user-select: none;
          user-select: none;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

$ npx postcss src/app.css
.label {
  user-select: none;
  backdrop-filter: blur(4px);
}

— 2026-10-04 時点の出力

解決策

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"] })],
};

よくある原因

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 は機能を実装するツールではない。