tailwind在monorepo中不生成样式,90%是content路径未覆盖跨包源码;必须用path.resolve(__dirname, '..')写绝对路径、显式列出所有包路径及文件后缀,配置须为commonjs格式module.exports。

Tailwind 在 Monorepo 里不生成样式?90% 是 content 路径没扫到跨包组件,不是配置写错了,是根本没读进去。
tailwind.config.js 的 content 必须显式覆盖所有包的源码路径
Monorepo 中 UI 组件(如 packages/ui)和业务页面(如 apps/web)物理隔离,content 默认只扫描当前包目录,./src/**/*.{ts,tsx} 这种写法会静默漏掉所有跨包类名。
- 正确写法示例:
content: ["../apps/**/src/**/*.{ts,tsx,jsx,mdx}", "../packages/**/src/**/*.{ts,tsx,jsx,mdx}"] - 路径层级必须与
pnpm-workspace.yaml实际结构严格对齐;多一个..或少一个,Tailwind 就不报错也不提示,只输出空 CSS - 务必排除构建产物目录,例如在 glob 后加
!../**/{dist,.next,node_modules}/**,否则可能触发重复扫描或性能抖动
共享 Tailwind 配置必须用 CommonJS + require(),不能用 ESM
Tailwind CLI 启动时同步加载配置,只认 module.exports。哪怕你用 tailwind.config.ts,也必须确保最终被 require() 加载的是 CommonJS 格式。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 禁止写
export default config—— 会直接报Cannot use import statement outside a module - 最稳妥做法:用
tailwind.config.js,内容纯 JS,避开 TS 编译时机干扰 - 若坚持用 .ts,需确认该文件已被
ts-node或构建流程提前转成 .js,且导出是module.exports = config - 业务包中必须通过
require("tailwind-config")引入,不能用import—— Tailwind 不支持 ESM 配置入口
pnpm workspace 协议不是“可选”,而是缓存和增量构建的前提
用 npm link 或手动拷贝配置文件,会导致 Turborepo 缓存失效、CI 构建不一致、修改配置后本地不更新 —— 因为工具链根本不知道这个配置是“被依赖的”。
- 必须在业务包中执行:
pnpm add -D workspace:tailwind-config - 检查
package.json是否出现:"tailwind-config": "workspace:^0.0.0" - Turborepo 用户需在
turbo.json中声明:"pipeline.build.dependsOn": ["^build"]或显式包含该配置包,否则缓存跳过变更
CSS 文件本身要按 JS 依赖方式引入,而非 HTML <link>
在多页面项目中,把 shared.css 放进每个页面的 HTML 里看似简单,但构建工具无法分析依赖关系,导致样式无法复用、无法 code-splitting、甚至重复注入。
- 正确做法:在每个页面对应的 JS 入口(如
login.tsx、admin.tsx)顶部import "@/styles/shared.css" - Vite 的
build.rollupOptions.input若列出多个 HTML,则每个对应 JS 入口都必须自己import样式,否则不会被打进 chunk - 绝对避免:同一个 CSS 既被 JS
import,又被 HTML<link>引入 —— DevTools Network 面板会显示两次请求
最容易被忽略的是:Tailwind 扫不到跨包类名时,它不会报错,也不会警告,只会默默输出一个几 KB 的空 CSS 文件。上线后才发现按钮没样式、响应式断点全失效 —— 此时第一反应不该是查插件或升级版本,而是打开终端,运行 npx tailwindcss -c ./tailwind.config.js --dry-run,看它实际扫描到了哪些文件。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










