前端Monorepo架构下各个子包之间如何共享引入CSS-css教程-PHP中文网

tailwind在monorepo中跨包提取类名失败，根本原因是content路径依赖process.cwd()而非配置文件位置，必须用path.resolve(__dirname, '..')构造绝对路径逐条写死各包路径及后缀，且配置须为commonjs格式。

前端monorepo架构下各个子包之间如何共享引入css

Tailwind CSS 在 Monorepo 中跨包提取类名失败，不是配置没写，而是 content 路径根本没扫到 UI 包里的 JSX 文件。

tailwind.config.js 的 content 必须用 path.resolve 构造绝对路径

你在 apps/web 里执行 pnpm build，Tailwind 就以那个目录为 process.cwd() 去解析相对路径。写 "../packages/ui/src/**/*.{ts,tsx}" 会错位成 apps/../packages/ui/...——根本不是 monorepo 根目录。

正确做法是让路径始终锚定在配置文件自身位置：

在 packages/tailwind-config/tailwind.config.js 中，用 require('path') 显式构造
content 列表每项都必须是 path.resolve(__dirname, '../apps/**/src/**/*.{ts,tsx,jsx}') 和 path.resolve(__dirname, '../packages/**/src/**/*.{ts,tsx,jsx}')
通配符 ** 在 fast-glob（Tailwind v3/v4 底层）中不支持嵌套匹配，"../packages/*/src/**" 可能漏包；逐条写死更稳
后缀必须显式列出：.ts、.tsx、.jsx、.mdx，漏一个就扫不到对应文件

配置包必须导出 CommonJS，且业务包要用 require 引入

Tailwind CLI 启动时同步 require() 配置，只认 module.exports。哪怕你用 .ts 后缀，只要导出是 export default config，Node 就按 ESM 加载，直接报 Cannot use import statement outside a module。

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

最稳妥：直接用 tailwind.config.js，内容纯 JS，module.exports = { ... }
若坚持 TS，必须确保该文件被 ts-node 或构建流程提前编译为 JS，且最终输出仍是 module.exports = config
业务包（如 apps/web/tailwind.config.js）里必须写 const baseConfig = require('tailwind-config')，不能 import
配置包内部不能 import 其他模块（包括自己写的工具函数），否则触发 ESM 陷阱

pnpm workspace: 协议不是可选，而是缓存与一致性的前提

用 npm link 或手动拷贝 tailwind.config.js，会导致 Turborepo 缓存失效、CI 构建结果不一致、增量构建跳过变更。

在基础配置包（如 packages/tailwind-config）中，只需 pnpm add -D tailwindcss，不用 postcss 或 autoprefixer
在业务包中，运行 pnpm add -D workspace:tailwind-config，检查 package.json 是否出现 "tailwind-config": "workspace:^0.0.0"
Turborepo 用户需在 turbo.json 的 pipeline.build.dependsOn 中显式包含该配置包，否则修改配置后缓存不更新
验证是否生效：改一个 UI 包组件里的 bg-blue-500，看最终生成的 CSS 文件里有没有对应规则