Sharing components in yarn workspaces (next and tailwindcss)

Question

I've got a frontend (next.js) which has tailwindcss installed (config, postcss, ...) and everything works. I've made another package (ui) which has the following 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"
  }
}

The problem is when is serve the ui locally everything works fine (the UI sees the styles of the component), but when deployed to vercel, the component has no styles in it.

The component (ui):

import React from 'react';

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

export default Example

And my next config (frontend)

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

module.exports = withTM()

Is there a way of sharing the same tailwind.config.js ? Or anything to make it work.

Steps that I have made:

• created the workspace
• added frontend package (next, and then i installed tailwind with all the steps from their docs)
• added the ui package (installed the peerDependencies, see above)
• created the component
• added the ui package as a dependency in the frontend, yarn install, and then imported the component
• yarn dev, and the styles are applied locally.
• deployed to vercel, the button has only the children , no styles

---

UPDATE: The problem is caused by the purging process at build time. Is there any way to specify in the tailwind config to purge also the ui package?

---

UPDATE2: I've tried to add the package (i've renamed it to "@example/ui") to the purge in 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: [],
}

The code in the UI package is inside of the src, has only the index.tsx file. I mention, locally still works fine.

Answer 1

Solved it ! In the purge array , I needed to add the node modules from the root of the project, not of the frontend