Sharing Tailwind components in a monorepo

One Solution is to elaborate all file paths which uses tailwind in the tailwind.config.js

for example, if package structure is like this

/packages
   /ui : @something/ui
/app

and if you want to import component from your app project /app/tailwind.config.js should be somewhat like this :

module.exports = {
  content: [
    "../packages/ui/**/*.{js,ts,jsx,tsx}"
    ...
  ],
  ...
}

I hope this might help someone.

@Manubi I didn’t find any way other than installing tailwind separately in each project that uses UI package, but having only the code in the UI package + tailwind configuration file. So would be something like this:

packages
  landing-page
    src
      index.js
  ui
    src
      button.js
    package.json
    tailwindcss.config.js
package.json

And then landing-page would have tailwindcss in it, but it would use the config from ui. This is useful when there’s, let’s say another landing page that is supposed to use the same config as the first landing page.

The drawback is that we’d have to install tailwind package in both of the landing pages (but not in the UI!). Your ui tailwindcss config file would have the base and the tailwindcss configs in the other packages can be defined as:

const baseConfig = require("../ui/tailwind.config")

module.exports = {
  ...baseConfig,
  content: ["./src/**/*.{js,jsx,ts,tsx}", "../ui/src/**/*.{js,jsx,ts,tsx}"],
  plugins: [],
}

And then import the components from the ui as:

import {Button} from "@my-app/ui"

const Page = () => (
  <Button> {"Hello"}</Button>
)
...

This worked perfectly for me.