在Vue3（无Vite）项目安装Tailwind CSS是否需要postcss.config.js文件？

首先明确：你package.json中"postcss": "^8.3.6"不是文档中提到的「postcss key」，二者属于完全不同的字段：

• 你现在看到的这个"postcss": "^8.3.6"是写在devDependencies或dependencies字段下的npm依赖声明，作用是告知包管理器需要安装对应版本的postcss工具包，和PostCSS的运行配置没有关系。
• 文档中提到的「postcss key」是直接写在package.json根层级的配置字段，和dependencies、scripts等字段平级，专门用于存放PostCSS的运行时配置。

你有两种可选的配置方式，不需要同时使用：

方式1：使用package.json的postcss键配置 #

直接在你的package.json根层级增加postcss配置段即可，示例如下：

{
  "name": "your-project-name",
  "version": "1.0.0",
  "scripts": {
    "serve": "vue-cli-service serve"
  },
  "dependencies": {
    "vue": "^3.2.0",
    "postcss": "^8.3.6"
  },
  "devDependencies": {
    "tailwindcss": "2.2.10",
    "autoprefixer": "^10.3.4"
  },
  // 以下就是文档所说的postcss key配置
  "postcss": {
    "plugins": {
      "tailwindcss": {},
      "autoprefixer": {}
    }
  }
}

方式2：单独创建postcss.config.js配置文件 #

如果你不想把配置写在package.json里，可以在项目根目录新建postcss.config.js文件，内容如下：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

注意：操作前请确保已经将对应版本的tailwindcss和autoprefixer安装到项目开发依赖中，安装命令为npm install -D tailwindcss@2.2.10 autoprefixer

内容的提问来源于stack exchange，提问作者Mark Gavagan