在Monorepo中如何正确关联依赖TailwindCSS的UI包与项目？

你当前的方案中，UI包与项目各自编译Tailwind CSS，导致工具类重复生成，且UI包会打包所有组件样式（即使项目未使用）。核心解决思路是让项目的TailwindCSS统一扫描所有用到的组件（包括UI包）并生成样式，UI包仅提供组件代码，不预编译CSS。

步骤1：调整UI包配置，停止预编译Tailwind CSS #

• 修改packages/ui/package.json：移除预生成CSS的导出，将TailwindCSS移至开发依赖（仅用于UI包本地预览，不随组件发布）

  {
    "name": "@monorepo/ui",
    "exports": {
      ".": {
        "import": "./dist/index.js",
        "types": "./dist/index.d.ts"
      }
      // 移除"./styles"的导出项
    },
    "files": [
      "dist"
    ],
    "scripts": {
      "build": "vite build && tsc --emitDeclarationOnly",
      "dev": "vite build --watch"
    },
    "dependencies": {
      // 保留React等框架依赖，移除tailwindcss依赖
    },
    "devDependencies": {
      "@tailwindcss/vite": "catalog:*",
      "@types/node": "catalog:*",
      "vite": "catalog:*",
      "tailwindcss": "catalog:*" // 移至开发依赖
    }
  }
  

• 修改packages/ui/src/index.ts：移除CSS导入，避免组件被导入时加载未编译样式

  // Export all components
  export { default as Button } from './Button';
  export { default as Input } from './Input';
  
  // 删除这行：import '../styles/index.css';
  

• 保留UI包的styles/index.css和Vite配置仅用于本地开发预览（比如在UI包内搭建小型预览页面，用于开发时查看组件样式，不影响组件打包）

步骤2：在项目中配置TailwindCSS，包含UI包组件源 #

• 在项目根目录创建/修改tailwind.config.js，将UI包的组件路径加入content数组，让Tailwind扫描UI组件中的类名：

  /** @type {import('tailwindcss').Config} */
  export default {
    content: [
      "./src/**/*.{tsx,jsx,html}",
      // 添加UI包组件路径，让Tailwind扫描其中的类名
      "../packages/ui/src/**/*.{tsx,jsx}"
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

• 修改app/styles/globals.css：移除对UI包生成CSS的导入，仅保留项目自身的Tailwind配置：

  @import "tailwindcss";
  
  @source "./../src"; /* 项目自身的源文件 */
  

步骤3：UI包本地开发预览配置（可选） #

若需单独预览UI组件，可在UI包内搭建本地预览环境：

• 在packages/ui下创建dev目录，添加index.html和dev.tsx用于组件预览
• 修改UI包的vite.config.ts，配置开发服务器指向该预览页面，仅用于本地开发，不影响组件打包

方案优势 #

• 按需生成样式：项目的Tailwind会扫描所有用到的文件（包括UI包组件），仅生成实际使用的类名，解决UI包打包冗余样式的问题
• 避免重复类：所有工具类仅由项目的Tailwind生成一次，彻底消除重复
• 主题统一：UI组件样式自动继承项目的Tailwind主题配置，若需自定义主题，可在UI包内提供主题扩展让项目导入

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