如何在Brunch中为不同输出CSS文件配置独立Tailwind配置？

当然有可行的方案！核心思路是根据处理的CSS文件路径，动态加载对应的Tailwind配置，让用户门户和后台的CSS分别使用各自的Tailwind配置。下面是具体实现步骤：

1. 准备两个Tailwind配置文件 #

先在项目根目录创建两个独立的Tailwind配置文件：

• tailwind.user.js：用于用户门户（css/user_portal/下的CSS）
• tailwind.admin.js：用于后台管理（css/admin/下的CSS）

确保每个配置里的content数组正确指向各自业务的模板文件，比如：

// tailwind.user.js
module.exports = {
  content: ['./src/user_portal/**/*.html', './src/user_portal/**/*.js'],
  theme: { /* 用户门户的主题配置 */ },
  // ...其他配置
}

// tailwind.admin.js
module.exports = {
  content: ['./src/admin/**/*.html', './src/admin/**/*.js'],
  theme: { /* 后台管理的主题配置 */ },
  // ...其他配置
}

2. 修改Brunch配置文件 #

在brunch-config.js中，调整postcss处理器部分，不再固定加载单一配置，而是通过一个自定义处理器函数，根据当前处理的文件路径选择对应的Tailwind配置：

// 提前加载两个Tailwind配置实例
const tailwindUser = require('tailwindcss')('./tailwind.user.js');
const tailwindAdmin = require('tailwindcss')('./tailwind.admin.js');

module.exports = {
  // ...其他已有配置（比如paths、files等）
  stylesheets: {
    joinTo: {
      "css/app.css": "css/user_portal/*.css",
      "css/admin/app.css": "css/admin/*.css",
    },
  },
  postcss: {
    processors: [
      // 自定义处理器：根据文件路径选择Tailwind配置
      (css, file) => {
        // 判断当前处理的文件属于用户门户还是后台
        if (file.path.includes('css/user_portal/')) {
          return tailwindUser.process(css, { from: file.path });
        } else if (file.path.includes('css/admin/')) {
          return tailwindAdmin.process(css, { from: file.path });
        }
        // 非目标文件直接返回原内容
        return css;
      }
    ]
  }
};

3. 验证效果 #

启动Brunch构建后，css/app.css会使用tailwind.user.js的配置生成样式，而css/admin/app.css则会使用tailwind.admin.js的配置，两者完全独立，不会共用样式配置。

注意事项 #

• 确保你已经安装了必要的依赖：brunch-postcss、tailwindcss、postcss（如果还没装，运行npm install brunch-postcss tailwindcss postcss --save-dev）
• 两个Tailwind配置的content一定要准确，这样Tailwind才能正确摇树优化，避免生成冗余样式
• 如果你的CSS文件路径和示例不同，记得修改file.path.includes()里的匹配字符串，确保能正确区分两组文件

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