Getting started with postcss.config.js

[ijy]

This is more of a newbie question than an issue but if you could point me in the right direction I'd appreciate it.

So I've added the plugins to my package.json devDependencies:

"devDependencies": {
    "autoprefixer": "^8.0.0",
    "browser-sync": "^2.18.13",
    "bs-html-injector": "^3.0.3",
    "cssnano": "^4.0.0-rc.2",
    "del": "^3.0.0",
    "gulp": "^3.9.1",
    "gulp-changed": "^3.2.0",
    "gulp-concat": "^2.6.1",
    "gulp-if": "^2.0.2",
    "gulp-newer": "^1.4.0",
    "gulp-notify": "^3.2.0",
    "gulp-nunjucks-render": "^2.2.2",
    "gulp-plumber": "^1.2.0",
    "gulp-postcss": "^7.0.0",
    "gulp-purgecss": "^0.15.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "postcss-cssnext": "^3.1.0",
    "postcss-import": "^11.1.0",
    "postcss-load-plugins": "^2.3.0",
    "postcss-mixins": "^6.2.0",
    "tailwindcss": "^0.5.1"
}

And created a postcss.config.js file:

module.exports = (ctx) => ({
    plugins: {
        postcss-import: {},
        postcss-mixins: {},
        tailwindcss: { './tailwind.js' },
        cssnext: {
            browsers: ['last 2 versions']
        },
        cssnano: ctx.env === 'production' ? {
            preset: ['default', {
                discardComments: {
                    removeAll: true,
                },
            }]
        } : false,
    }
})

And in my gulpfile.js I'm calling postcss() without passing anything in:

gulp.task("css", () => {
    return gulp
        .src(src.css + "index.css")
        .pipe(plumber(onError))
        ...
        .pipe(postcss())
        ...
});

But when I run things, I get the following error:

Error: Unexpected token -
{ /path/to/site/postcss.config.js:3
        postcss-import: {},
               ^
...

Any suggestions as to what I'm missing?

[ijy]

Nevermind. Fixed it with:

module.exports = (ctx) => ({
    plugins: {
        'postcss-import': {},
        'postcss-mixins': {},
        'tailwindcss': ('./tailwind.js'),
        'postcss-cssnext': {
            browsers: ['last 2 versions']
        },
        'cssnano': ctx.env === 'production' ? {
            preset: ['default', {
                discardComments: {
                    removeAll: true,
                },
            }]
        } : false,
    }
})

Looks like tailwind also requires a string to the path rather than an object.