搭配tailwindcss的postcss.config.js配置具体规则是什么？

非常感谢大家持续提供解答，在此说明我已经在自行发布的回答中给出了正确解决方法，我之前的错误出在示例2的写法上，该处应该使用方括号而非花括号！

目前公开的postcss.config.js配置教程存在多种不同写法，极易造成混淆。例如tailwindcss官方文档给出的写法如下：

// 示例1：
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

还有一类写法是直接在配置中require相关库：

// 示例2：
module.exports = {
  plugins: {
    require('tailwindcss'),
    require('postcss-preset-env')({
      stage: 0,
      'nesting-rules': true
    })
  },
}

还有第三种写法是先在module.exports之前引入依赖库：

// 示例3：
const tailwindcss = require('tailwindcss');
const postcssPresetEnv = require('postcss-preset-env');

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

如果需要引入不符合默认命名规则的配置文件，还存在更多特殊写法。
我在vue-cli创建的Vue2项目中使用示例2的配置运行yarn dev时，抛出如下错误：

Syntax Error: /[path]/_pod-test/postcss.config.js:3
    require('tailwindcss'),
             ^^^^^^^^^^^

SyntaxError: Unexpected string

我删除tailwindcss相关行后，postcss-preset-env相关代码又触发了相同报错：

Syntax Error: /Volumes/_III_/Z_WWW/_ZZZ PoD/_pod-test/postcss.config.js:3
    require('postcss-preset-env')({
            ^^^^^^^^^^^^^^^^^^^^

SyntaxError: Unexpected string

我切换为示例1的写法后，又出现如下报错：

Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.

而我本地实际已经安装了postcss 8.3.9版本，请问要如何操作才能让这套配置正常运行？

• 首先修正配置语法错误：postcss配置的plugins字段支持两种格式，不要混用：
  • 对象格式：键为插件名称，值为插件的配置项，对应示例1的写法
  • 数组格式：直接传入require后的插件实例，需要用方括号[]包裹，示例2、示例3错误使用了对象格式包裹数组类型的配置项，触发语法报错
• 修正后的示例2写法：

// 修正后的示例2：
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('postcss-preset-env')({
      stage: 0,
      'nesting-rules': true
    })
  ],
}

• 针对示例1报PostCSS 8版本不兼容的问题，是因为vue-cli 4及更低版本内置的postcss-loader依赖PostCSS 7，和本地安装的PostCSS 8冲突，两种解决方式：
  1. 降级适配：安装兼容PostCSS 7的tailwindcss版本，执行命令yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
  2. 升级适配：将vue-cli升级到v5及以上版本，内置支持PostCSS 8，可直接使用官方示例1的配置写法

内容的提问来源于stack exchange，提问作者Robert Wildling