在Nuxt中使用Windi CSS时，能否在windi.config.ts获取当前主题？

原方案不可行的原因 #

Windi CSS 的配置文件（windi.config.ts）是构建阶段执行的，而你基于主机名识别品牌的 ThemeManager 是**运行时（请求阶段）**才会生效的逻辑。构建阶段根本无法获取到当前请求的主机名，自然没法动态生成对应品牌的 Windi 配置，所以控制台没有输出是正常的。

可行替代方案 #

方案一：用 CSS 变量动态切换（Windi/Tailwind 通用） #

这是最适合你场景的方案，核心思路是把颜色变量交给运行时控制，CSS 框架只引用变量：

1. 在 ThemeManager 中定义各品牌颜色
   在 theme.ts 里给每个品牌配置专属的 primary 颜色，比如：

   class ThemeManager {
     getCurrentTheme() {
       const hostname = typeof window !== 'undefined' ? window.location.hostname : '';
       return hostname === 'foo.com' ? 'foo' : 'bar';
     }
     getPrimaryColor() {
       const theme = this.getCurrentTheme();
       const colors = {
         foo: '#ff4d4f',
         bar: '#1890ff'
       };
       return colors[theme];
     }
   }
   

2. 运行时注入 CSS 变量
   在 Nuxt 的客户端插件（比如 plugins/theme.client.ts）或者布局组件中，动态设置根元素的 CSS 变量：

   import { ThemeManager } from '~/theme';
   
   export default defineNuxtPlugin(() => {
     if (process.client) {
       const themeManager = new ThemeManager();
       const primaryColor = themeManager.getPrimaryColor();
       document.documentElement.style.setProperty('--primary-color', primaryColor);
     }
   });
   

   如果是 SSR 场景，要在服务端同步设置避免 hydration 不匹配：

   // 在 app.vue 或布局组件中
   const themeManager = new ThemeManager();
   useHead({
     style: [
       {
         children: `:root { --primary-color: ${themeManager.getPrimaryColor()} }`,
         type: 'text/css'
       }
     ]
   });
   

3. 在 CSS 框架配置中引用变量

   • 对于 Windi CSS，修改 windi.config.ts：

     export default {
       theme: {
         extend: {
           colors: {
             primary: 'var(--primary-color)'
           }
         }
       }
     }
     

   • 对于 Tailwind CSS，修改 tailwind.config.ts：

     export default {
       theme: {
         extend: {
           colors: {
             primary: 'var(--primary-color)'
           }
         }
       }
     }
     

   之后用 text-primary、bg-primary 这类类名时，就会自动应用当前品牌的颜色。

方案二：品牌专属前缀类（Tailwind 更友好） #

如果需要更精细化的品牌样式控制，可以给每个品牌加根类，通过 CSS 层叠实现样式隔离：

1. 在 Tailwind 配置中定义品牌专属颜色

   export default {
     theme: {
       extend: {
         colors: {
           'foo-primary': '#ff4d4f',
           'bar-primary': '#1890ff'
         }
       }
     }
   }
   

2. 添加品牌类的 CSS 规则
   在项目全局 CSS 文件（比如 assets/css/tailwind.css）中添加：

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   
   :root {
     --tw-primary: theme('colors.foo-primary'); /* 默认 fallback 值 */
   }
   
   .brand-foo {
     --tw-primary: theme('colors.foo-primary');
   }
   .brand-bar {
     --tw-primary: theme('colors.bar-primary');
   }
   
   @layer base {
     :root {
       --color-primary: var(--tw-primary);
     }
   }
   

   再在 Tailwind 配置里映射变量：

   export default {
     theme: {
       extend: {
         colors: {
           primary: 'var(--color-primary)'
         }
       }
     }
   }
   

3. 运行时给根元素添加品牌类
   在 Nuxt 插件或布局中，根据当前主题给 <html> 添加对应类：

   import { ThemeManager } from '~/theme';
   
   export default defineNuxtPlugin(() => {
     const themeManager = new ThemeManager();
     const theme = themeManager.getCurrentTheme();
     if (process.client) {
       document.documentElement.classList.add(`brand-${theme}`);
     } else {
       useHead({
         htmlAttrs: {
           class: `brand-${theme}`
         }
       });
     }
   });
   

方案三：多环境构建（适合独立部署场景） #

如果每个品牌是单独部署的，可以在构建时通过环境变量指定品牌，然后在配置文件中读取变量切换配置：

• 构建时：BRAND=foo npm run build
• 在 Windi/Tailwind 配置中：

  const brand = process.env.BRAND || 'foo';
  const brandColors = {
    foo: { primary: '#ff4d4f' },
    bar: { primary: '#1890ff' }
  };
  
  export default {
    theme: {
      extend: {
        colors: brandColors[brand]
      }
    }
  }
  

  但这个方案只适合每个品牌单独部署的场景，不支持同一实例通过主机名动态切换。

内容的提问来源于stack exchange，提问作者Toni Michel Caubet