Nuxt 应用中 WindiCSS 类名无法生效问题求助

• 核心原因是配置覆写了默认颜色系统：你在windi.config.ts中直接定义了theme.colors字段，这会完全替换WindiCSS/TailwindCSS默认提供的所有内置颜色预设，当前配置仅保留了自定义的primary颜色，默认的red、blue等颜色都被移除，因此text-red类名不存在对应的样式规则。
• 次要排查点：你使用的text-red类名没有指定色阶，WindiCSS/TailwindCSS默认的内置颜色都附带100-900的色阶后缀，原生不存在无后缀的text-red类名，除非你单独配置了该颜色。
• 其他可能原因：未正确完成WindiCSS/TailwindCSS的项目集成配置，比如未引入全局样式入口、未配置打包工具插件、文件扫描路径不匹配等。

1. 修正配置文件，避免覆盖默认颜色
   如果需要保留框架默认颜色的同时新增自定义颜色，需要将自定义配置写在theme.extend字段下，修改后的windi.config.ts参考：

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  extract: {
    include: ['**/*.{vue,html,jsx,tsx}'],
    exclude: ['node_modules', '.git'],
  },
  theme: {
    extend: { // 新增extend层，不会覆盖默认配置
      colors: {
        primary: '#5b0770',
      },
    }
  },
})

2. 修正类名写法，补充色阶后缀
   将text-red修改为对应色阶的类名，比如普通红色用text-red-500，浅红色用text-red-200，深红色用text-red-700。
3. 检查项目集成配置

• 确认已安装对应打包工具的WindiCSS插件（比如Vite环境需安装vite-plugin-windicss，Webpack环境需安装windicss-webpack-plugin），并在打包工具配置中完成注册。
• 确认项目入口文件（如main.ts）中已引入WindiCSS的全局样式：import 'virtual:windi.css'
• 若使用TailwindCSS替换，逻辑完全一致：自定义颜色需写在theme.extend.colors下，入口文件需引入TailwindCSS的样式指令，tailwind.config.ts的content字段需包含所有业务代码文件路径。

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