Tailwind CLI与PostCSS插件无法正确转译CSS问题求助

算力阿峰

2026-7-14

解决Tailwind CLI不识别PostCSS插件的问题

你犯了个常见的配置错误：把PostCSS插件（postcss-nested、postcss-simple-vars这些）放到了tailwind.config.js的plugins数组里——这个位置是用来配置Tailwind专属插件（比如@tailwindcss/forms这类）的，根本不是PostCSS插件的配置入口，所以Tailwind CLI完全忽略了这些插件。

下面是具体解决步骤：

创建PostCSS专属配置文件
在项目根目录新建postcss.config.js，把你的PostCSS插件都放到这里，注意顺序：Tailwind本身作为PostCSS插件要放在最后：

module.exports = {
  plugins: [
    require('postcss-nested'),
    require('postcss-simple-vars'),
    require('postcss-mixins'),
    require('tailwindcss'),
    // 可选：如果需要自动加前缀，加上autoprefixer
    require('autoprefixer')
  ]
}

改用PostCSS CLI编译
之前的Tailwind CLI命令只会处理Tailwind本身的语法，现在要换成postcss-cli来驱动，命令改成：
```
npx postcss ./assets/postcss/tailwind.css -o ./assets/dist/css/app.css
```
如果你的PostCSS配置文件不是默认的postcss.config.js，可以用--config指定路径：
```
npx postcss ./assets/postcss/tailwind.css -o ./assets/dist/css/app.css --config ./your-config-path/postcss.config.js
```
验证效果
重新运行命令，你会发现@colorr变量和mixin都被正常转译到输出的app.css里了。