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?
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!