如何在React项目中使用CSS后处理器_集成PostCSS并配置常用CSS插件-css教程-PHP中文网

React项目默认支持PostCSS但不预装插件；CRA v5+内置PostCSS但忽略postcss.config.js，需eject或换Vite；Vite支持该配置，须用CommonJS导出、正确安装插件并按序排列，且禁用postcss-preset-env的CSS变量转换以避免与Tailwind冲突。

如何在react项目中使用css后处理器_集成postcss并配置常用css插件

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之前）。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

先安装插件：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