在 yarn 工作区共享组件（next 和 tailwindcss）答案

【问题标题】：Sharing components in yarn workspaces (next and tailwindcss)在 yarn 工作区共享组件（next 和 tailwindcss）
【发布时间】：2021-10-22 21:25:24
【问题描述】：

我有一个前端（next.js），它安装了tailwindcss（config、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，见上）
创建了组件
在前端添加ui包作为依赖，yarn install，然后导入组件
yarn dev，样式在本地应用。
部署到vercel，按钮只有子元素，没有样式

更新： 该问题是由构建时的清除过程引起的。有什么方法可以在 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文件。我提到，本地仍然可以正常工作。

【问题讨论】：

标签： reactjs next.js yarnpkg tailwind-css vercel

【解决方案1】：

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

【讨论】：