Nuxt.js项目中TailwindCSS自定义颜色不生效问题求助

问题根源 #

1. 手动在Vite配置中添加Tailwind插件，与Nuxt的Tailwind生态兼容冲突，导致配置文件中的自定义主题无法被正确加载。
2. 使用了Tailwind CSS v4的实验性语法@theme static，而当前稳定版v3不支持该写法，因此自定义颜色无法被识别。

修复步骤 #

1. 安装官方Nuxt Tailwind模块

替换手动Vite配置为官方模块，这是Nuxt 3集成Tailwind的标准方式：

npm install @nuxtjs/tailwindcss --save-dev

2. 更新nuxt.config.ts配置

移除手动添加的Vite Tailwind插件，将官方模块加入modules数组：

// nuxt.config.ts
export default defineNuxtConfig({
  css: [
    '~/assets/css/tailwind.css'
  ],
  compatibilityDate: '2025-05-15',
  devtools: { enabled: true },
  modules: ['@nuxtjs/tailwindcss', '@nuxt/image', '@nuxt/fonts', '@nuxt/icon'],
  // 移除以下手动Vite插件配置
  // vite: {
  //   plugins: [
  //     tailwindcss(),
  //   ],
  // }
})

3. 修正tailwind.css文件语法

改用Tailwind CSS v3的标准导入结构，移除不兼容的@theme static语法：

/* ./assets/css/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* （可选）如果不想通过tailwind.config.js配置，也可以用@layer自定义工具类 */
/* @layer utilities {
  .bg-primary {
    background-color: #10243f;
  }
  .text-primary {
    color: #10243f;
  }
} */

4. 确认tailwind.config.js配置（现有配置已正确）

你的content和theme.extend配置没问题，确保所有使用Tailwind类的文件都被包含在content数组中：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './components/**/*.{vue,js,ts}',
    './layouts/**/*.{vue,js,ts}',
    './pages/**/*.{vue,js,ts}',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
    './app.vue',
  ],
  theme: {
    extend: {
      colors: {
        primary: '#10243f',
        secondary: '#1867a0',
      },
    },
  },
  plugins: [],
}

5. 清理缓存并重启服务

rm -rf .nuxt node_modules/.cache
npm run dev

验证 #

现在使用bg-primary等自定义颜色类应该可以正常生效，比如你的按钮示例：

<button type="submit" class="bg-primary hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg shadow-lg transition duration-300">
  Send Message
</button>

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