Issue
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
Solution
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.
Answered By - Adam Marshall
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.