title: What exactly are the rules for configuring postcss.config.js (mainly with tailwndcss)?
body: <p>The number of variants that exist to showcase how <code>postcss.config.js</code> has to be configured is extremely confusing. There are examples (like the one at the <code>tailwindcss</code> documentation) that use this:</p>
  <pre class="lang-js prettyprint-override"><code>// Example 1:
  module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  }
  </code></pre>
  <p>then there are those which require the libraries:</p>
  <pre class="lang-js prettyprint-override"><code>// Example 2:
  module.exports = {
    plugins: {
      require('tailwindcss'),
      require('postcss-preset-env')({
        stage: 0,
        'nesting-rules': true
      })
    },
  }
  </code></pre>
  <p>Others require external libs before they configure <code>module.exports</code>:</p>
  <pre class="lang-js prettyprint-override"><code>// Example 3:
  
  const tailwindcss = require('tailwindcss');
  const postcssPresetEnv = require('postcss-preset-env');
  
  
  module.exports = {
    plugins: {
      tailwindcss,
      postcssPresetEnv
    },
  }
  </code></pre>
  <p>and again some more that are necessary, when a configuration file that is not named according to the defaults has to be incorporated.</p>
  <p>Today I get this error, when running <code>yarn dev</code> with a postcss.config.js as show in Example 2:</p>
  <pre class="lang-sh prettyprint-override"><code>Syntax Error: /[path]/_pod-test/postcss.config.js:3
      require('tailwindcss'),
               ^^^^^^^^^^^
  
  SyntaxError: Unexpected string
  </code></pre>
  <p>When I remove the line with &quot;tailwindcss&quot;, the same thing happens for &quot;postcss-preset-env&quot;:</p>
  <pre class="lang-sh prettyprint-override"><code>Syntax Error: /Volumes/_III_/Z_WWW/_ZZZ PoD/_pod-test/postcss.config.js:3
      require('postcss-preset-env')({
              ^^^^^^^^^^^^^^^^^^^^
  
  SyntaxError: Unexpected string
  </code></pre>
  <p>When I then switch to a setup as shown in example 1, I get this error:</p>
  <pre class="lang-sh prettyprint-override"><code>Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.
  Migration guide for end-users:
  https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
  </code></pre>
  <p>I do use postcss 8.3.9!</p>
  <p>This all happens in a project that was setup with <code>vue-cli</code> as a Vue2 project.</p>
  <p>Which witch craft do I have to apply to make this setup work?</p>