Vercel Turborepo React Monorepo中Tailwind CSS配置失效求助

我基于Vercel提供的create-react-app模板搭建了Turborepo React Monorepo，复制官方Tailwind配置后，CSS样式完全未应用到任何组件上。

项目文件夹结构 #

• react-monorepo：项目根目录
• apps：包含两个React应用（client、admin）及Express CRUD接口
• node_modules：项目共用依赖目录
• packages：包含公共组件包（ui）及其他共享配置
• 注：apps和packages是根目录package.json中定义的工作区

关键文件内容 #

apps/admin/package.json #

{
  "name": "admin",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "react-scripts start",
    "dev": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint src/**/*",
    "clean": "rm -rf build"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "ui": "*",
    "web-vitals": "^2.1.2"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.0.3",
    "@types/node": "^18.17.2",
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.11",
    "@types/testing-library__jest-dom": "^5.14.5",
    "eslint-config-custom": "*",
    "tsconfig": "*",
    "typescript": "^4.5.3",
    "postcss": "^8.4.20",
    "tailwind-config": "*",
    "tailwindcss": "^3.2.4",
    "autoprefixer": "^10.4.13"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

apps/admin/tailwind.config.ts #

import type { Config } from "tailwindcss";
import sharedConfig from "tailwind-config/tailwind.config.ts";

const config: Pick<Config, "presets"> = {
  presets: [sharedConfig],
};

export default config;

apps/admin/postcss.config.js #

// If you want to use other PostCSS plugins, see the following:
// https://tailwindcss.com/docs/using-with-preprocessors

// eslint-disable-next-line no-undef
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

apps/admin/src/index.css #

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

packages/tailwind-config/package.json #

{
  "name": "tailwind-config",
  "version": "0.0.0",
  "private": true,
  "files": ["tailwind.config.ts"],
  "devDependencies": {
    "tailwindcss": "^3.2.4"
  }
}

packages/tailwind-config/tailwind.config.ts #

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./apps/**/*.{js,ts,jsx,tsx}",
    "./src/**/*.{js,ts,jsx,tsx}",
    "../../packages/ui/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
export default config;

packages/ui/package.json #

{
  "name": "ui",
  "version": "0.0.0",
  "private": true,
  "license": "MIT",
  "sideEffects": false,
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "scripts": {
    "build": "tsup src/index.tsx --format cjs --dts --external react",
    "clean": "rm -rf dist",
    "dev": "tsup src/index.tsx --format cjs --watch --dts --external react",
    "lint": "eslint src/**/*"
  },
  "devDependencies": {
    "@types/react": "^17.0.13",
    "@types/react-dom": "^17.0.8",
    "eslint": "^8.4.1",
    "eslint-config-custom": "*",
    "react": "^17.0.2",
    "tsconfig": "*",
    "tsup": "^6.0.1",
    "typescript": "^4.5.3",
    "postcss": "^8.4.20",
    "tailwind-config": "*",
    "tailwindcss": "^3.2.4",
    "autoprefixer": "^10.4.13"
  }
}

packages/ui/tailwind.config.ts #

// tailwind config is required for editor support
import type { Config } from "tailwindcss";
// eslint-disable-next-line import/no-extraneous-dependencies
import sharedConfig from "tailwind-config/tailwind.config.ts";

const config: Pick<Config, "prefix" | "presets"> = {
  prefix: "ui-",
  presets: [sharedConfig],
};

export default config;

补充说明 #

• packages/ui/postcss.config.js内容与apps/admin/postcss.config.js一致
• packages/ui/src/index.css包含Tailwind导入语句，且已在packages/ui/src/index.tsx中导入

问题排查与修复步骤 #

1. 修正共享Tailwind配置的Content路径 #

packages/tailwind-config/tailwind.config.ts中的路径是相对该包的，原路径存在错误，修改为：

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    // 相对于tailwind-config包，指向根目录下的apps和packages
    "../../apps/**/*.{js,ts,jsx,tsx}",
    "../../packages/ui/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
export default config;

移除原配置中多余的./src/**/*，因为tailwind-config包本身没有src目录下的组件文件。

2. 修复UI包的sideEffects设置 #

packages/ui/package.json中sideEffects: false会导致CSS文件被Tree-Shake移除，改为：

"sideEffects": [
  "*.css"
]

3. 调整UI包的tsup构建配置以处理CSS #

当前tsup命令仅编译TSX文件，需添加CSS处理支持，修改packages/ui/package.json的scripts：

"build": "tsup src/index.tsx --format cjs --dts --external react --css",
"dev": "tsup src/index.tsx --format cjs --watch --dts --external react --css"

确保UI包的src/index.tsx正确导入index.css：

import './index.css';

// 导出你的组件
export { YourComponent } from './YourComponent';

4. 验证CRA应用的CSS导入 #

确认apps/admin/src/index.tsx中已正确导入index.css：

import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

5. 清理缓存并重新构建 #

在项目根目录执行以下命令：

turbo clean
npm install
turbo build

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