I have setup a new nextjs application using create-next-app.
And have installed postcss, postcss-import, postcss-mixins, autoprefixer packages, and added following postcss.config.js file

module.exports = {
  plugins: {
    "postcss-import": {},
    "postcss-mixins": {},
    autoprefixer: {},
  },
};

My next.config.mjs looks like this :

import createNextIntlPlugin from "next-intl/plugin";

const withNextIntl = createNextIntlPlugin();

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default withNextIntl(nextConfig);

and I have defined a mixin called pink in src/mixins/color.css file like this

@mixin pink {
  background-color: pink !important;
}

then this file is imported to global.css in src/styles/global.css and used

@import "../mixins/color.css";

body {
    @mixin pink;
}

is not working. Also tried creating a mixin using @define-mixin directive but also no luck.

Important note:
Putting invalid syntax in postcss.config.css does not break the application.
For example :

module.exports = {
  plugins: {
    "postcss-import": {},
    "postcss-mixins": nonExistingVar,
    autoprefixer: 12 + this + Error,
  },
};