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: [], | |
} |
thanks, mate!