I’m using tailwindcss in my nuxt3 project via official @nuxtjs/tailwindcss

{
    "dependencies": {
        "nuxt": "^3.11.2"
    },
    "devDependencies": {
        "@nuxtjs/tailwindcss": "^6.9.4"
    }
}

I import the package in nuxt.config.ts

export default defineNuxtConfig({
    css: [
        '~/assets/scss/main.scss',
    ],
    modules: [
        '@nuxtjs/tailwindcss',
    ],
});

since I have to define some custom style classes via tailwindcss, in my main.scss

@tailwind base;
@tailwind utilities;

.custom-class {
    @apply mx-2;
}

@layer base {
    *,
    ::before,
    ::after {
        @apply border-[var(--border-color)];
    }
}

now, everything works correctly, except the tailwindcss output has been rendered twice in production

the online production output

How to prevent the redundant tailwindcss render result?

Thanks for any replies!