Nuxt3项目SSR生产环境TailwindCSS样式重复渲染问题求助

问题场景 #

在Nuxt3项目中通过官方@nuxtjs/tailwindcss模块使用TailwindCSS，相关配置及代码如下：

项目依赖 #

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

Nuxt 配置（nuxt.config.ts） #

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

自定义样式文件（assets/scss/main.scss） #

@tailwind base;
@tailwind utilities;

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

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

当前功能运行正常，但生产环境下出现TailwindCSS样式重复渲染的问题。

解决方法 #

样式重复的核心原因是：@nuxtjs/tailwindcss模块默认会自动注入Tailwind的base、components、utilities基础样式，而你在自定义SCSS文件中又手动添加了@tailwind base和@tailwind utilities，导致同一份样式被输出两次。

步骤1：移除SCSS中的重复指令 #

修改main.scss，删除手动写入的@tailwind base;和@tailwind utilities;，保留自定义类和@layer规则即可：

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

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

步骤2：验证修复效果 #

重新执行生产构建命令：

npm run build

构建完成后检查输出的CSS文件，确认重复渲染的样式已消失。

可选：完全手动控制样式注入（不推荐） #

如果需要完全自主管理Tailwind样式的注入，可以在nuxt.config.ts中禁用模块的自动注入功能，但这会增加配置复杂度，仅适合特殊场景：

export default defineNuxtConfig({
    modules: ['@nuxtjs/tailwindcss'],
    tailwindcss: {
        // 禁用模块自动注入CSS
        cssPath: false
    },
    css: [
        '~/assets/scss/main.scss' // 此时需要在main.scss中手动引入@tailwind base/components/utilities
    ]
});

注意：使用该方式时，必须确保自定义SCSS中完整引入Tailwind的三类指令，否则会丢失默认样式。

内容的提问来源于stack exchange，提问作者DengSihan