Vite 中 PostCSS“无效”主因是配置未被正确加载：必须将 postcss.config.js 放在项目根目录，且不可在 vite.config.ts 中显式声明 css.postcss（否则覆盖默认配置）；单文件组件需指定 lang="postcss" 或预处理器语言才能触发 PostCSS 处理。
PostCSS 在 Vite 里“无效”，90% 是因为配置没进 Vite 的 PostCSS 实例，而不是插件本身坏了。 Vite 5+ 内置 PostCSS 8，但它的加载逻辑和 Webpack 完全不同：Webpack 显式靠 postcss-loader 插入流水线，Vite 则只认特定路径的配置文件、且会因显式覆盖而静默丢弃默认行为。
postcss.config.js 没被 Vite 加载到
Vite 不会自动扫描子目录或任意命名的配置文件。它只在项目根目录（与 vite.config.ts 同级）查找 postcss.config.js、postcss.config.cjs 或 postcss.config.mjs。如果放错位置（比如塞进 src/ 或 config/），Vite 就当它不存在。
- 检查文件是否存在且路径正确：
ls -l postcss.config.* - 验证是否真被读取：在
postcss.config.js开头加require('xxx-missing')，启动不报错 → 说明根本没加载 - 若
package.json有"type": "module"，必须用.cjs后缀，否则require()失败，插件数组为空
vite.config.ts 里写了 css.postcss 就覆盖了默认配置
Vite 默认已启用 Autoprefixer + Tailwind 等插件，但只要你显式写了 css.postcss 字段（哪怕只配了个空对象），它就会完全忽略 postcss.config.js，也不合并插件。
- 错误写法：
css: { postcss: {} }→ PostCSS 流水线存在，但插件列表为空 - 正确做法：要么删掉
css.postcss，让 Vite 自动加载配置文件；要么手动传完整插件数组：css: { postcss: { plugins: [require('autoprefixer'), require('tailwindcss')] } } - 注意：Vite 不支持在
vite.config.ts中调用postcss()实例，那只是 Node.js 的 PostCSS，不接入构建流程
Vue / Svelte 组件里的
Vite 对单文件组件的处理是分层的：<style> 默认走 Vite 原生 CSS 解析器，不经过 PostCSS；只有显式声明 lang 才触发插件链。
立即学习“前端免费学习笔记（深入）”；
-
<style lang="postcss">→ 走 PostCSS（但需确保插件已注册） -
<style lang="scss">→ 先走 Sass 编译，再把结果交给 PostCSS（前提是 Sass loader 输出 CSS） -
<style scoped>+@apply→ 若未启用 PostCSS，@apply直接被当注释跳过，无任何报错 - SvelteKit 中
.svelte文件也需在tailwind.config.js的content字段显式列出，否则 Purge 阶段清空所有类
最常被忽略的一点：Vite 的 PostCSS 是“按需注入”的——它只处理被 JS import 或 HTML <link> 引入的 CSS 文件。直接放在 public/ 下的 CSS、或通过 document.write 动态插入的样式，永远不进 PostCSS 流程。
