What exactly are the rules for configuring postcss.config.js (mainly with tailwndcss)?

UPDATE (2024-05-29): Since there are still people who provide answers (thank you!) I would like to point out that I provided the proper solution/approach with my own answer already. My error was the spelling in example 2, which actually needs brackets instead of curly braces!

[Original Post]

The number of variants that exist to showcase how postcss.config.js has to be configured is extremely confusing. There are examples (like the one at the tailwindcss documentation) that use this:

// Example 1:
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

then there are those which require the libraries:

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

Others require external libs before they configure module.exports:

// Example 3:

const tailwindcss = require('tailwindcss');
const postcssPresetEnv = require('postcss-preset-env');


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

and again some more that are necessary, when a configuration file that is not named according to the defaults has to be incorporated.

Today I get this error, when running yarn dev with a postcss.config.js as show in Example 2:

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

SyntaxError: Unexpected string

When I remove the line with "tailwindcss", the same thing happens for "postcss-preset-env":

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

SyntaxError: Unexpected string

When I then switch to a setup as shown in example 1, I get this error:

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

I do use postcss 8.3.9!

This all happens in a project that was setup with vue-cli as a Vue2 project.

Which witch craft do I have to apply to make this setup work?

Solution

There is a subtle, but very important difference between examples 1 and 2 that I posted.

Example 2 is actually wrong!

While example 1 uses objects to configure the parameters of the plugins, the 2nd example uses function calls. And those must be put in an ARRAY (meaning: brackets instead of curly braces).

This would be correct version of Example 2:

// Example 2 fixed:

module.exports = {
  plugins: [  // <= here we MUST use brackets!
    ... [function calls] ...
  ],
}

I have not yet tested if that is also true for example 3 (but I assume so).

Hope this helps somebody!