Webpacker: Can I use postcss.config.js?

[jvanbaarsen]

Is there a way to use postcss.config.js instead of the yml file? I'm trying to get Tailwindcss (https://tailwindcss.com/docs/installation/) running, but they seem to require setting up some extra config variables in the postcss.config.js:

var tailwindcss = require('tailwindcss');
module.exports = {
  plugins: [
    // ...
    tailwindcss('./path/to/your/tailwind-config.js'),
    require('autoprefixer'),
    // ...
  ]
}

There is a good change I'm asking this in totally the wrong place, if so you can close this. Reason I'm asking here, is because the docs says that postcss-loader is included in webpacker, and it comes with a .postcssrc by default.

[gauravtiwari]

Is adding the plugin to the list doesn't work?

plugins:
  postcss-smart-import: {}
  postcss-cssnext: {}
  tailwindcss: { config: 'path to config' }

[jvanbaarsen]

@gauravtiwari It turned out that if I deleted the .postcssrc file and added a postcss.config.js file it worked. So that means there is a load order so it seems:

1. .postcssrc
2. postcss.config.js

[gauravtiwari]

Yes, that's another way but I realised we explicitly use it inside the loader: https://github.com/rails/webpacker/blob/master/package/loaders/style.js#L14

But if it's working, great 👍

[frodsan]

@gauravtiwari should webpacker generate the standard postcss.config.js instead of the YAML version? 🤔, like:

# postcss.config.js
module.exports = {
    plugins: [
        require('postcss-import'),
        require('postcss-next')
    ]
}

Thanks!