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: [], | |
} |
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!
Great!
When I first encountered this, there was no implementation in the angular package, but now there is :)