在纱线工作区中共享组件（next 和 tailwindcss）

Question

我有一个前端 (next.js)，它安装了 tailwindcss（配置、postcss、...）并且一切正常。我制作了另一个包 (ui)，其中包含以下内容 package.json

{
  "name": "ui",
  "version": "1.0.0",
  "private": true,
  "peerDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "autoprefixer": "^10.3.2",
    "postcss": "^8.3.6",
    "tailwindcss": "^2.2.7"
  }
}

问题是当在本地为 ui 服务时一切正常（UI 看到组件的样式），但是当部署到 Vercel 时，组件中没有样式。

组件（ui）：

import React from 'react';

const Example = ({children}) => <button className='bg-blue-500 py-1 px-2'>{children}</button>

export default Example

还有我的下一个配置（前端）

const withTM = require('next-transpile-modules')(['bar'])

module.exports = withTM()

有没有办法共享相同的tailwind.config.js？或者任何让它工作的东西。

我完成的步骤：

创建工作区
添加了前端包（下一步，然后我使用他们文档中的所有步骤安装了 tailwind）
添加了 ui 包（安装了 peerDependencies，见上文）
创建组件
在前端yarn install中添加ui包作为依赖，然后导入组件
yarn dev，样式在本地应用。
部署到vercel，按钮只有子元素，没有样式

更新： 问题是由 build 时间的清除过程引起的。有什么方法可以在 tailwind 配置中指定也清除 ui 包吗？

更新2： 我试图将包（我已将其重命名为“@example/ui”）添加到 next.config.js

中的清除中

module.exports = {
  purge: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './node_modules/@example/ui/src/*.{js,ts,jsx,tsx}'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

UI包中的代码在src里面，只有index.tsx文件。我提到，本地仍然可以正常工作。

Answer 1

解决了！在清除数组中，我需要从项目的根目录添加节点模块，而不是前端

在纱线工作区中共享组件（next 和 tailwindcss）

Sharing components in yarn workspaces (next and tailwindcss)

reactjs

yarnpkg

next.js

vercel

tailwind-css