tailwind css在monorepo中跨包共享css组件需打通路径扫描、配置加载、依赖协议和构建缓存四条链路；content必须显式覆盖所有包源码路径并用commonjs导出，pnpm workspace:协议安装且require引入，否则类名静默不生成。
Tailwind CSS 在 Monorepo 中跨包共享 CSS 组件，本质不是“装个包就能用”，而是要同时打通路径扫描、配置加载、依赖协议和构建缓存四条链路——漏掉任何一环，都会出现“写了 class 却没生成样式”的静默失效。
tailwind.config.js 的 content 字段必须显式覆盖所有包的源码路径
Monorepo 里 apps/web 和 packages/ui 是物理隔离的目录，但 Tailwind 默认只扫当前包下的 ./src/**/*.{ts,tsx}。一旦 UI 组件定义在 packages/ui/src/Button.tsx，而配置文件还在 apps/web/tailwind.config.js 里写 "./src/**/*"，那个 btn-primary 就永远进不了最终 CSS。
- 正确写法示例（假设项目根目录下有
apps/和packages/）：content: [ "../apps/**/src/**/*.{ts,tsx,jsx,mdx}", "../packages/**/src/**/*.{ts,tsx,jsx,mdx}", "!../**/node_modules", "!../**/{dist,build,.next}" ] - 路径层级必须与
pnpm-workspace.yaml实际结构严格一致：多一个..或少一个，Tailwind 都不会报错，只会安静地不生成对应样式 - 务必排除构建产物目录，否则可能触发重复扫描或内存溢出
配置包必须用 CommonJS 导出，且业务包必须用 require() 引入
Tailwind CLI 启动时同步 require() 配置文件，它不支持 ESM。哪怕你用 tailwind.config.ts，最终也得被转成 module.exports = config 形式；直接写 export default config 会抛 Cannot use import statement outside a module。
- 最稳妥做法：直接建
tailwind.config.js，内容纯 JS，避开 TS 编译时机干扰 - 若坚持用 .ts：确保该文件被
ts-node或构建流程提前编译为 .js，且导出是module.exports = config - 业务包中引入方式必须是
require("my-tailwind-config")，不能用import—— Tailwind 不识别 ESM 入口
必须用 pnpm add -D workspace:xxx 安装配置包，不能 npm link 或手动拷贝
workspace: 协议不只是方便本地开发，更是 Turborepo 缓存和增量构建的前提。用 npm link 或复制配置文件，会导致：
- Turborepo 认为配置没变，跳过 rebuild，改了
content也不生效 - CI 环境因缺少符号链接而构建失败
- 不同包之间配置版本不一致，本地能跑，CI 报错
正确操作是在业务包内执行：
pnpm add -D workspace:@myorg/tailwind-config并确认
package.json 中出现："@myorg/tailwind-config": "workspace:^0.0.0"
UnoCSS / Windi CSS 同样卡在路径扫描，不能默认“自动发现”
UnoCSS 不是 Tailwind 的平替，它有一套独立的扫描逻辑，默认只认当前工作目录。如果你把原子化工具放在 apps/web，但组件定义在 packages/ui，它根本不会去那里找 class="bg-blue-500"。
- 必须显式扩展
content或include列表，例如：content: { files: [ "../apps/**/src/**/*.{ts,tsx,jsx}", "../packages/**/src/**/*.{ts,tsx,jsx}" ] } - 和 Tailwind 一样，路径必须与实际 workspace 结构对齐，且不能遗漏
.jsx等扩展名 - 注意 UnoCSS 的
extractor插件是否适配 JSX/TSX 语法，某些老版本对className={clsx(...)}提取不全
最容易被忽略的是：Tailwind 和 UnoCSS 都不会告诉你“哪些文件没扫到”。它们只管生成 CSS，而缺失的类名就彻底消失——你得靠手动检查构建产物 CSS 文件大小、或临时加个明显 class 测试渲染，才能反向验证路径是否真生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
