Tailwind purge with Nx, no ProjectGraph error

user_1061602 0
Viewed 853

The documentation here: https://nx.dev/l/r/guides/using-tailwind-css-in-react#introducing-nx-utility-for-better-tailwind-purging suggests to use createGlobPatternsForDependencies(__dirname) for ease of maintenance.

I am using this from '@nrwl/angular/tailwind', not '@nrwl/react/tailwind'.

When I use this and trigger a build of my app, I get the following errors:

[createGlobPatternsForDependencies] WARNING: There was no ProjectGraph available to read from, returning an empty array of glob patterns

Q: How can I resolve this?

I can run nx dep-graph and the dependency graph generates fine.

EDIT: I debugged this, and __dirname documentation says workspace relative directory path that will be used to infer the parent project and dependencies but then it fails later on line 20 of generate-globs.js because filenameRelativeToWorkspaceRoot is the '', i.e. its trying to find a project name but __dirname is the workspace name itself?

so

purge: createGlobPatternsForDependencies(join(__dirname, 'apps/simple-app')),

doesn't give the ProjectGraph error but

purge: createGlobPatternsForDependencies(__dirname), does

nrwl-nx tailwind-css angular
1 Answers

I also posted on Github which raised the issue of the Nx documentation being based around React.

Since I posed this question, a blog post has been written: https://blog.nrwl.io/set-up-tailwind-css-with-angular-in-an-nx-workspace-6f039a0f4479

and documentation is on the Nx web site: https://nx.dev/guides/using-tailwind-css-with-angular-projects

but the key learning for this is have a separate Tailwind config file per app.

you can have a preset with shared Tailwind config and consume that, but the createGlobPatternsForDependencies expects to be per app, so then the __dirname being the project name makes a whole lot more sense...

If at that point you still get [createGlobPatternsForDependencies] WARNING: There was no ProjectGraph available to read from, returning an empty array of glob patterns then there is possibly a circular dependency preventing the code from executing, its possible to debug the tailwind.js file in node_modules/@nrwl/angular/ to see.

user_10616020
Related