So we only need to specify a list of globs to the content
prop of the tailwind.config.js
@nrwl/workspace
contains a function called createGlobPatternsForDependencies
which can generate an array of globs that you can pass to tailwind.
{ | |
"devDependencies": { | |
"tailwindcss": "3.0.2", | |
"autoprefixer": "10.4.0", | |
"postcss": "^8.4.5", | |
"postcss-import": "^14.0.2" | |
} | |
} |
// in apps/myapp/postcss.config.js | |
const { join } = require('path') | |
module.exports = { | |
plugins: { | |
'postcss-import': {}, | |
// if using .css files, and we want to use css ne | |
'tailwindcss/nesting': {}, | |
// pass in the local tailwind config | |
tailwindcss: { | |
config: join(__dirname, 'tailwind.config.js'), | |
}, | |
autoprefixer: {}, | |
}, | |
} |
module.exports = { | |
// since we already have our own resets for both app and view, we don't use the tailwind preflight reset | |
corePlugins: { | |
preflight: false, | |
}, | |
// we also enable !important, because we often need to override materials base css, and without it, we will have to add ! to every statement anyways | |
important: true, | |
content: [], | |
darkMode: false, // or 'media' or 'class' | |
theme: { | |
extend: {}, | |
}, | |
variants: { | |
extend: {}, | |
}, | |
plugins: [], | |
} |
// in apps/myapp/tailwind.config.js | |
const { join } = require('path') | |
const colors = require('tailwindcss/colors') | |
const { | |
createGlobPatternsForDependencies, | |
} = require('@nrwl/workspace/src/utilities/generate-globs') | |
/** | |
* Generates a set of glob patterns based off the source root of the app and its dependencies | |
* @param dirPath workspace relative directory path that will be used to infer the parent project and dependencies | |
* @param fileGlobPattern pass a custom glob pattern to be used | |
*/ | |
function createGlobPatternsForDependenciesLocal( | |
dirPath, | |
fileGlobPattern = '/**/!(*.stories|*.spec).{html,ts}', | |
) { | |
try { | |
return createGlobPatternsForDependencies(dirPath, fileGlobPattern) | |
} catch { | |
console.warn( | |
'\n[createGlobPatternsForDependencies] WARNING: There was no ProjectGraph available to read from, returning an empty array of glob patterns\n', | |
) | |
return [] | |
} | |
} | |
module.exports = { | |
presets: [require('../../tailwind-workspace-preset.js')], | |
content: [ | |
// look for source files in the app folder | |
join(__dirname, 'app/**/*.{html,ts}'), | |
// but then also look for source files in all the libs that the app depends on | |
...createGlobPatternsForDependenciesLocal(__dirname), | |
], | |
darkMode: 'class', // or 'media' or 'class' | |
theme: { | |
extend: {}, | |
}, | |
variants: { | |
extend: {}, | |
}, | |
plugins: [], | |
} |
The new Angular 13 webpack cache is making tailwind buggy, so it might be an idea to turn it of for now, or at least know about it so you can clear it / disable it.
signs of it not working is.
read more about the webpack cache here.
this setting might be located differently in nx.
it might be in nx.json as a property under the cli
settings
You should be able to directly import the framework specific convenient functions
const { createGlobPatternsForDependencies } = require('@nrwl/angular/tailwind')
or
const { createGlobPatternsForDependencies } = require('@nrwl/next/tailwind')
Great!
When I first encountered this, there was no implementation in the angular package, but now there is :)
this still doesn't work for me, __dirname
is my top level workspace name, and then createGlobPatternsForDependencies
seems to want a project name.
It always fails with [createGlobPatternsForDependencies] WARNING: There was no ProjectGraph available to read from, returning an empty array of glob patterns
...
If I pass in dirPath
of an individual app or lib it does return an array of glob patterns.
so I don't think this code is necessarily compatible with the angular implementation... I think that is maybe the issue, its the angular implementation which works differently to the react implementation. EDIT: no it doesn't work for me with the import in the gist above either....
the only way I can get it working is by doing the following:
...createGlobPatternsForDependenciesLocal(join(__dirname, 'apps/my-app')),
or with a lib name
...createGlobPatternsForDependenciesLocal(join(__dirname, 'libs/shared/ui')),
when I debug, line 15 of generate-globs.js here:
const filenameRelativeToWorkspaceRoot = (0, path_1.relative)(app_root_1.appRootPath, dirPath);
I have the same value for app_root_1.appRootPath
as. I do with dirPath
thanks, mate!
Thx a lot!