Yarn工作区中Next.js与TailwindCSS共享UI包部署后样式丢失问题

算力阿峰

2026-10-6

问题根因

你遇到的部署后无样式问题完全是Tailwind生产构建的Purge机制导致的，本地dev模式下Purge默认关闭，所以样式正常，部署到Vercel时自动启用生产构建，未被扫描到的Tailwind类名会被全部清理。你之前的配置存在三处错误：

Tailwind配置中pages路径的语法错误，少了闭合的}
仅匹配UI包src一级目录的文件，若后续有子目录会扫描失败，且相对路径在依赖被工作区hoist时可能失效
next-transpile-modules未将@example/ui加入转译列表，生产构建时不会处理node_modules中UI包的代码，导致Purge扫描不到对应类名

修复步骤

修正next.config.js配置，将UI包加入转译列表：

const withTM = require('next-transpile-modules')(['bar', '@example/ui'])

module.exports = withTM()

修正tailwind.config.js配置，改用绝对路径定位UI包，确保不管依赖安装位置都能被正确扫描：

const path = require('path')

module.exports = {
  purge: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    // 自动解析@example/ui的安装路径，扫描所有子目录的代码
    `${path.dirname(require.resolve('@example/ui'))}/**/*.{js,ts,jsx,tsx}`
  ],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}