Tailwind + PurgeCSS + NPM module

[lewishowles]

So this isn't really an issue with Tailwind, but I figure Tailwind people might know more about this use case than PurgeCSS people.

We're creating a new system of Vue components for use both internally and on customer-facing projects. Things like buttons, data tables, form elements, etc. These components are bundled as an NPM module in a private repository, and then included in any project that needs to use them.

The problem I'm having is that in one of these projects that includes the components, PurgeCSS is removing any Tailwind classes used in the component module that isn't used in the main project.

Essentially, I want to pass PurgeCSS a JS file from node_modules, and have it find compiled classes in there that have been used in the components module, and whitelist them.

I've tried setting content: ['**/*.vue', './node_modules/@software2inc/ui-components/dist/*.js'], in the PurgeCSS config but I'm getting an illegal operation on a directory, read error when doing that (though it is the correct path).

I've seen https://github.com/qodesmith/purgecss-whitelister but that only works with css files, which aren't generated when bundling our components - just JS files (and we want the Tailwind settings of the project to apply, so if we override blue for that project, any of the components that used the blue classes also look different).

Any ideas? It doesn't seem like that strange an idea but I can't see anyone coming across the same thing.

[tlgreg]

Seems like purgecss matches a directory instead of a file there. This is just a guess, but maybe escape the @ character in the pattern, glob does have a pattern with @. Something like: content: ['**/*.vue', './node_modules/\\@software2inc/ui-components/dist/*.js']

[lewishowles]

Ah amazing, as simple as that. I was worried I was trying to do something really stupid there. Thanks a lot!