How can i keep npm packages with tailwind.css working

[hellomrbigshot]

I creat a privite npm package(PackageA) with tailwind. There are some media query classes like hidden lg:flex.
Then I create another project ProjectB with tailwind, then I import PackageA in this project in main.ts.

import { createApp } from 'vue'
import App from './App.vue'
import PackageA from 'PackageA' // import component
import ''./index.css' // import tailwind.css
import 'PackageA/dist/style.css' // import PackageA css

...

createApp(App).use(PackageA).mount('#app')

I use hidden in ProjectB but no lg:flex

After I build ProjectB, I find lg:flex doesn't work. Also PackageA/dist/style.css has been bundled, but hidden in ProjectB covers hidden lg:flex
I can add 'lg:flex' in tailwind.config.js to solve this problem, but i think it's not a good solution.

purge: {
  safelist: ['lg:flex']
}

I Try to add 'PackageA/dist/style.css' in purge.content but it doesn't work.

purge: {
    content: ['./public/**/*.html', './src/**/*.{vue,js,ts,jsx,tsx}',  './node_modules/PackageA/dist/style.css']
}

Is there anyway to solve this problem.

[lmlife2016]

I have found the solution👇

#4389

my tailwind.config.js look likes below:

module.exports = {
  purge: {
    enable: process.env.NODE_ENV !== 'development',
    content: [
      './src/**/*.html',
      './src/**/*.vue',
+     './node_modules/my-component-path/**/*.{vue,js,ts,jsx,tsx}',
    ],
  },
  // ...
}

[copostic]

Shouldn't we use a method like this one ?
https://dev.to/samrobbins85/making-an-npm-package-for-a-react-component-library-with-tailwind-css-a0h

[drusellers]

Having to map my explicit node_modules path seems a bit awkward. Is there a way to use the existing path resolution features that we use with other packages?

module.exports = {
  purge: {
    content: [
      './src/**/*.html',
      './src/**/*.vue',
      'my-component/**/*.{vue,js,ts,jsx,tsx}', // would pull in the npm package `my-component`
      '@scope/my-component/**/*.{vue,js,ts,jsx,tsx}', // would pull in the npm package `@scope/my-component`
    ],
  },
  // ...
}

[freshgiammi]

Have you looked at this? I've had success using the path module to resolve a package inside a monorepo. https://tailwindcss.com/docs/content-configuration#working-with-third-party-libraries

My config looks like this (mind you I'm importing components from the src folder and not the dist otherwise I don't get docgen, but you could consume from dist by removing the /src suffix and looking for .js files instead:

const path = require("path");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/stories/**/*.{ts,tsx,mdx}",
    path.join(path.dirname(require.resolve("@acme/core/src")), "**/*.{ts,tsx}"),
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

[roj1512]

What about ESM?

[freshgiammi]

path.join(path.dirname(require.resolve("@acme/core")), "**/*.{mjs}") works fine for me loading modules from the output folder, but mind you I've only tested this in the monorepo I'm working on right now.

[drusellers]

That is def closer. hmm. TY

[GeorgeTaveras1231]

Just calling out that none of the approaches shared here work well with package exports or PNP.

Because require.resolve('my-package') may resolve to any arbitrary file inside the package, and the resolution will use the condition used by require (the require condition in package.json['exports']) which may not be the same condition used by a bundler (most bundlers will use the module condition before falling back to the require condition). This is a problem if a package is structured as

<root>
|_ cjs
  |_ component.cjs
|_ module
  |_ component.js // (or component.mjs)

In addition, attempting to resolve a specific folder inside a package (like require.resolve('@acme/core/src') or require.resolve('package/module') requires that the author explicitly provide this export path.

Lastly, writing ./node_modules/package/**/*.js doesn't play well with PnP which does not store modules in the node_modules folder.

Ideally, tailwind would support package resolution natively, so that it can handle resolving the files properly. And maybe even support a custom tailwind package export condition to allow package authors to explicitly list the files that can be processed by tailwind 💡

Package authors would write something like

// package.json

{
  "name": "@acme/core",
  "exports": {
    "./**/*.js": {
      "tailwind": "./path/to/my-es-component-files/**/*.js"
    }
  }
}

And consumers of the package would write

// tailwind.config.js

module.exports = {
  content: [
    "@acme/core"
  ]
}