React项目默认支持PostCSS但不预装插件；CRA v5+内置PostCSS但忽略postcss.config.js，需eject或换Vite；Vite支持该配置，须用CommonJS导出、正确安装插件并按序排列，且禁用postcss-preset-env的CSS变量转换以避免与Tailwind冲突。
React项目默认支持PostCSS，但不预装任何插件——你得自己配，否则postcss.config.js只是个空壳，@tailwindcss/jit或autoprefixer这些根本不会生效。
确认Create React App是否已启用PostCSS
Create React App（CRA）v5+ 内置PostCSS 8，且默认加载postcss-preset-env和autoprefixer，但仅限于基础兼容性补全。它**不读取你项目根目录下的postcss.config.js**，除非你eject或改用Vite/Next.js等更开放的工具链。
- 如果你用的是CRA：别费劲写
postcss.config.js，它被忽略；想加插件必须eject，或迁移到Vite - 如果你用的是Vite：开箱支持
postcss.config.js，且优先级高于内置配置 - 错误现象：
@apply报错、color-mix()不解析、伪类在旧版Safari失效——大概率是插件没真正加载
在Vite项目中正确配置PostCSS插件
Vite会自动查找并合并postcss.config.js，但插件必须显式安装并导出，且顺序影响结果（例如tailwindcss必须在autoprefixer之前）。
- 先安装插件：
npm install -D postcss postcss-preset-env autoprefixer tailwindcss -
postcss.config.js内容必须是CommonJS格式（Vite不支持ESM导出）：module.exports = { plugins: { 'postcss-preset-env': { stage: 3 }, 'autoprefixer': { overrideBrowserslist: ['> 1%', 'last 2 versions'] }, 'tailwindcss': {} } } - 注意：
tailwindcss插件会自动读取tailwind.config.js，但若你删了该文件，它会静默失败，不报错也不处理@tailwind规则
避免CSS变量与PostCSS插件的解析冲突
PostCSS插件对自定义属性（--primary-color）的处理很敏感：postcss-preset-env默认将它们转为静态值，而tailwindcss依赖原生变量运行时计算——两者共存时容易互相覆盖。
立即学习“前端免费学习笔记（深入）”；
- 在
postcss-preset-env中禁用CSS变量转换：{ preserve: true, stage: 3 } - 确保
tailwindcss插件排在postcss-preset-env之后，否则postcss-preset-env可能提前把hsl(var(--hue), 70%, 60%)转成无效字符串 - 调试技巧：在CSS里写
div { color: var(--missing-var, red); }，如果最终编译结果仍是var(--missing-var, red)，说明变量未被PostCSS注入——检查tailwind.config.js里的theme.extend.colors是否正确定义了--hue
最常被跳过的一步是验证插件是否真正在运行：改完postcss.config.js后，删掉node_modules/.vite缓存目录再重启开发服务器，否则Vite可能复用旧的CSS处理管道。
