根本原因是构建工具未识别跨包源码路径或解析url()时基准目录错误；tailwind需用path.resolve(__dirname, '..')写绝对content路径，vite中css的url()必须通过import接管或放public目录。
pnpm 工作区里引入 CSS 包后路径解析异常，根本原因不是 CSS 本身写错了，而是构建工具（Tailwind、Vite、Webpack）在扫描或加载时，压根没“看见”跨包的源码路径，或者看见了却用错了基准目录去解析 url() —— 这两类问题经常混在一起，但修复思路完全不同。
tailwind.config.js 的 content 必须用 path.resolve 写绝对路径
Tailwind 启动时以 process.cwd() 为基准解析 content 字段，而你在 apps/web/tailwind.config.js 里写 "../packages/ui/src/**/*.{ts,tsx}"，一旦从根目录执行 pnpm build，.. 就指向了错误位置，所有 UI 包里的类名都会静默漏掉。
- 必须用
path.resolve(__dirname, '../packages/ui/src/**/*.{js,jsx,ts,tsx}')——__dirname永远指向配置文件自身位置，不受执行目录影响 - 每个子包都该有自己的
tailwind.config.js，别共用一份；否则不同包用的 Tailwind 版本或插件可能冲突 - 通配符
../packages/**/src/**不可靠，fast-glob不支持嵌套匹配，必须显式列出每个包路径 - 后缀要全覆盖：
.svelte、.astro、.mdx都得加，漏一个就漏一类组件
Vite 构建后 CSS 里的 url() 全部 404
CSS 文件里的 url(../img/logo.png) 是纯静态路径，它只认自己“出生时”的磁盘位置。Vite 构建时把 packages/ui/src/components/Button.css 提取成 dist/assets/Button.xxxx.css，但里面的 ../img/ 还是按原路径向上找 —— 此时已完全脱离原始结构。
- 正确做法只有两种：
import logoUrl from '@/assets/logo.png'（让 Vite 接管路径和哈希），或把图放public/img/logo.png并写url('/img/logo.png') - 千万别在 CSS 里写
url('@/assets/logo.png')或url('./logo.png')—— Vite 不解析、不重写、不报错，上线就 404 - 第三方 CSS（如
node_modules/@myorg/ui/dist/index.css）也一样：必须在 JS 入口import '@myorg/ui/dist/index.css'，否则里面所有url()都裸拷进dist，路径必然断
Webpack css-loader 不识别 @/ 别名，除非加 ~
Webpack 的 resolve.alias（比如 @: path.resolve('src')）对 CSS 文件无效。你在 packages/ui/src/styles/index.css 里写 background: url('@/assets/bg.png')，css-loader 会直接当字面量处理，然后报 Can't resolve './@/assets/bg.png'。
- 必须写成
background: url('~@/assets/bg.png')——~是 css-loader 和 less-loader 约定的信号，表示“交给 Webpack resolver 处理” -
@import "@/styles/vars.css"同样失败，得改成@import "~@/styles/vars.css" - 如果用了
postcss-import，它能统一处理@import路径，但依然不处理url()，~不能省
最常被忽略的一点：pnpm 的硬链接机制会让某些路径解析“看起来正常”，实则依赖隔离失效。比如 packages/ui 里引用了 packages/shared 的样式变量，但 shared 的构建产物没导出 CSS，只导出了 TS 类型 —— 此时路径没错，但内容为空。这类问题不会报错，只会让你花半天时间怀疑是不是 Tailwind 配置漏了某个 glob。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
