如何基于Tailwind与Turborepo搭建独立生成CSS的组件库？

完全可以实现你要的目录结构——让packages/ui自行编译Tailwind生成独立的CSS文件，apps下的项目仅需导入该CSS、依赖ui包即可，无需安装Tailwind相关依赖。下面是具体配置步骤：

一、配置packages/ui包 #

1. 安装依赖
   在packages/ui目录下执行：

npm install tailwindcss postcss autoprefixer --save-dev

2. 初始化Tailwind配置
   执行命令生成Tailwind和PostCSS配置文件：

npx tailwindcss init -p

3. 修改tailwind.config.js
   指定组件文件路径，确保Tailwind能扫描到所有使用类名的组件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. 创建基础样式文件
   在packages/ui/src下新建styles.css，写入Tailwind核心指令：

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

5. 配置package.json
   添加构建脚本，指定编译后CSS的输出路径；同时设置包的导出规则，让其他项目能正确导入组件和样式：

{
  "name": "ui",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "tailwindcss -i ./src/styles.css -o ./dist/styles.css",
    "dev": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch"
  },
  "exports": {
    ".": "./src/index.js",
    "./styles.css": "./dist/styles.css"
  },
  "files": ["dist", "src"]
}

注：src/index.js是组件的导出入口，比如在这里导出所有UI组件：export { Button } from './components/Button'

6. 编写UI组件
   组件中直接使用Tailwind类名即可，比如src/components/Button.jsx：

export const Button = ({ children }) => {
  return (
    <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      {children}
    </button>
  );
};

二、配置apps下的项目（以app1为例） #

1. 依赖ui包
   在apps/app1目录下执行：

npm install ui

（Turborepo会自动链接本地的ui包，无需发布到npm）

2. 导入UI样式
   在app1的入口文件（比如src/index.js或src/App.jsx）中导入ui生成的CSS：

import 'ui/styles.css';

3. 使用UI组件
   直接导入并使用组件即可，无需额外配置Tailwind：

import { Button } from 'ui';

function App() {
  return (
    <div>
      <Button>测试按钮</Button>
    </div>
  );
}

export default App;

三、配置Turborepo编译流水线 #

修改根目录的turbo.json，确保ui包的构建优先于apps项目：

{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"]
    },
    "dev": {
      "cache": false
    }
  }
}

这样执行turbo build时，会先编译ui生成CSS文件，再编译所有apps项目；执行turbo dev时，ui的dev脚本会监听样式变化自动重新编译。

四、验证效果 #

• apps/app1和apps/app2的package.json中没有tailwindcss、postcss等依赖
• 启动app1后，UI组件的Tailwind样式正常生效
• 修改ui组件的类名或styles.css，重新构建后apps项目能获取到更新后的样式

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