Vue extractStyles issue

Tailwind CSS is not compiling from a single file component

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .vue({ version: 3, extractStyles: 'css/styles.css' })
    .postCss('resources/css/app.css', 'public/css')
    .alias({
        '@': 'resources/js',
    });

mix.options({
    // processCssUrls: true,
    // terser: {},
    // purifyCss: false,
    // //purifyCss: {},
    postCss: [require('postcss-import'), require('tailwindcss'), require('autoprefixer')],
    // clearConsole: false,
    // cssNano: {
    //     // discardComments: {removeAll: true},
    // }
});

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.(postcss)$/,
                use: [
                    'vue-style-loader',
                    { loader: 'css-loader', options: { importLoaders: 1 } },
                    'postcss-loader'
                ]
            }
        ],
    },
})

if (mix.inProduction()) {
    mix.version();
}


<style lang="postcss" scoped>
nav {
    @apply flex flex-grow pt-4 lg:flex-grow-0 justify-evenly lg:pt-0 bg-blue-500;
}

nav > a {
    @apply inline-flex items-center px-1 pt-1 text-sm font-medium leading-5 transition duration-150 ease-in-out
            border-b-2 border-transparent cursor-pointer text-primary hover:text-black hover:border-secondary
            focus:outline-none focus:text-gray-700 focus:border-secondary;
}
</style>

Plain CSS doesn't compile when I add lang="postcss" to the style tag in the Vue component. @apply doesn't compile at all. What am I doing wrong?