如何在使用TailwindCSS的pnpm Monorepo中避免CSS类重复？

针对你的场景，核心问题是两个包独立编译TailwindCSS导致相同类重复生成，以下是几种可行的解决方案：

方案一：提取共享配置+排除已生成类 #

这个方案保留你先构建UI包、再构建Frontend包的流程，通过让Frontend包识别并跳过UI包已生成的CSS类来避免重复。

1. 抽离共享Tailwind配置
   在Monorepo根目录创建统一的tailwind.config.base.js，存放两个包共享的主题、插件等配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      // 这里放两个包共用的主题配置，比如颜色、间距等
    }
  },
  plugins: []
}

2. UI包配置
   UI包的tailwind.config.js继承根目录的基础配置，并指定自身的内容扫描路径：

const baseConfig = require('../../tailwind.config.base.js');

module.exports = {
  ...baseConfig,
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  corePlugins: {
    preflight: false // 让Frontend包统一处理基础样式，避免重复
  }
}

3. Frontend包配置
   Frontend包的配置同样继承基础配置，同时读取UI包编译后的CSS文件，提取已生成的类并加入黑名单，避免重复生成：

const baseConfig = require('../../tailwind.config.base.js');
const fs = require('fs');
const path = require('path');

// 从UI包编译后的CSS中提取已存在的类
function getExistingUiClasses() {
  const uiCssPath = path.resolve(__dirname, '../ui/dist/ui.css'); // 替换为你的UI包编译输出CSS路径
  const cssContent = fs.readFileSync(uiCssPath, 'utf8');
  // 匹配CSS类名的正则（可根据实际情况调整）
  const classMatch = cssContent.match(/\.[a-zA-Z0-9-_]+(?=\s|{)/g);
  return classMatch ? new Set(classMatch.map(cls => cls.slice(1))) : new Set();
}

module.exports = {
  ...baseConfig,
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  safelist: {
    blocklist: Array.from(getExistingUiClasses())
  },
  corePlugins: {
    preflight: true // 仅在一个包中启用preflight即可
  }
}

4. 构建顺序
   确保Frontend包的构建脚本依赖UI包的构建完成，比如在根目录的package.json中：

{
  "scripts": {
    "build": "pnpm run build:ui && pnpm run build:frontend"
  }
}

方案二：使用Tailwind预设统一配置 #

通过UI包导出Tailwind预设，让Frontend包基于该预设编译，同时避免重复生成基础样式和已有类。

1. UI包导出预设
   修改UI包的tailwind.config.js作为预设：

module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: { /* 共享主题配置 */ }
  },
  plugins: []
}

2. Frontend包引用预设
   Frontend包的配置直接使用UI包的预设，并仅扫描自身内容，禁用重复的preflight：

const uiTailwindPreset = require('../ui/tailwind.config.js');

module.exports = {
  presets: [uiTailwindPreset],
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  corePlugins: {
    preflight: false // 复用UI包的基础样式，避免重复
  }
}

注意：这个方案需要确保Frontend包中用到的UI组件类已经在UI包中生成，Tailwind会根据Frontend的内容只生成新增的类，不会重复生成已存在的类（因为Frontend的content不包含UI包的文件，所以不会触发重复编译）。

方案三：全局统一编译TailwindCSS #

如果可以调整构建流程，最彻底的方式是在Monorepo根目录统一编译TailwindCSS，生成一份全局CSS文件，两个包直接引用这份文件，完全避免重复。

1. 根目录配置Tailwind
   在根目录创建tailwind.config.js，同时扫描两个包的内容：

module.exports = {
  content: [
    './packages/ui/src/**/*.{js,ts,jsx,tsx}',
    './packages/frontend/src/**/*.{js,ts,jsx,tsx}'
  ],
  theme: { /* 共享主题配置 */ },
  plugins: []
}

2. 创建全局CSS入口
   在根目录创建styles/global.css：

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

3. 编译全局CSS
   使用Tailwind CLI或你常用的构建工具（比如Vite、Webpack）编译这份全局CSS，输出到公共目录（比如dist/global.css）。

4. 两个包引用全局CSS
   在UI包和Frontend包的入口文件中直接引用编译后的全局CSS：

import '../../dist/global.css';

这种方式所有CSS类只会生成一次，完全解决重复问题，适合两个包高度耦合、样式需求统一的场景。

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