Nuxt 4(RC)中自定义bg-primary颜色无法生效问题求助

你的问题出在手动配置Vite Tailwind插件和Tailwind CSS导入方式上，Nuxt 4推荐使用官方Tailwind集成模块处理配置，而非手动添加Vite插件。以下是修复步骤：

1. 改用Nuxt官方Tailwind模块 #

移除nuxt.config.ts中手动添加的Vite Tailwind插件，替换为官方模块：

export default defineNuxtConfig({
  compatibilityDate: "2025-07-15",
  css: ['~/assets/css/main.css'],
  // 添加官方Tailwind模块，移除原vite.plugins配置
  modules: ['@nuxtjs/tailwindcss'],
});

若未安装该模块，先执行安装命令：

npm install @nuxtjs/tailwindcss

2. 调整Tailwind CSS导入方式 #

将assets/css/main.css中的导入语句替换为Tailwind标准分层导入，确保所有样式层（基础、组件、工具类）正确加载：

@tailwind base;
@tailwind components;
@tailwind utilities;

3. 保留Tailwind配置文件（无需修改） #

你的tailwind.config.js配置是正确的，自定义颜色已在theme.extend.colors中声明，官方模块会自动识别该文件：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './app/**/*.{js,ts,vue}',
    './components/**/*.{js,ts,vue}',
    './layouts/**/*.{js,ts,vue}',
    './pages/**/*.{js,ts,vue}',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
    './**/*.vue'
  ],
  theme: {
    extend: {
      colors: {
        primary: 'rgb(29, 78, 216)',
      },
    },
  },
  plugins: [],
};

验证效果 #

重启Nuxt开发服务器后，页面中的bg-primary类即可正常应用自定义颜色：

<h1 class="text-3xl font-bold bg-primary text-white">
    Hello World!
</h1>

原因说明 #

Nuxt 4的兼容性机制与手动配置Vite插件存在冲突，官方Tailwind模块会自动处理以下核心逻辑：

• 自动扫描项目模板文件（无需手动维护content路径）
• 正确注入Tailwind的CSS层
• 同步Tailwind配置与Nuxt构建流程
  手动添加Vite插件会导致Tailwind无法正确读取自定义配置或生成对应工具类，仅能加载默认样式。

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