How to add PostCSS plugins to Bud?

bud
7

I am trying to do similar thing here
trying to add postcss-nested plugin with bud but it does not seem to be working.

Here is the error I get

./resources/styles/partials/_base.scss @apply is not supported within nested at-rules like @include. You can fix this by un-nesting @include.

  153 |     @apply flex flex-col w-full p-8;
  154 |     @include respond(md) {
> 155 |       @apply flex-row p-0;
      |       ^
  156 |     }

and below is my bud config file.

/**
 * @typedef {import('@roots/bud').Bud} Bud
 *
 * @param {Bud} config
 */

module.exports = async (config) =>
  config
    /**
     * Application entrypoints
     *
     * Paths are relative to your resources directory
     */
    .entry({
      app: ['scripts/app.js', 'styles/app.css'],
      editor: ['scripts/editor.js', 'styles/editor.css'],
    })

    /**
     * Add postcss plugin with bud
     */
    .tap(bud => {
      bud.postcss.setPlugin('postcss-nested', [
        require.resolve('postcss-nested'), // the plugin module path
        {}, // options
      ])
    })


    /**
     * These files should be processed as part of the build
     * even if they are not explicitly imported in application assets.
     */
    .assets(['resources/images'])

    /**
     * These files will trigger a full page reload
     * when modified.
     */
    .watch([
      'tailwind.config.js',
      'resources/views/**/*.blade.php',
      'app/View/**/*.php',
    ])

    /**
     * Target URL to be proxied by the dev server.
     *
     * This is your local dev server.
     */
    .proxy('http://website.local');

Any suggestions here on what I am doing wrong?
Thanks