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.
Last active
April 21, 2023 07:04
-
-
Save leon/86f4502faa1953d35cc6547da849f703 to your computer and use it in GitHub Desktop.
NX tailwind 3 setup
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "devDependencies": { | |
| "tailwindcss": "3.0.2", | |
| "autoprefixer": "10.4.0", | |
| "postcss": "^8.4.5", | |
| "postcss-import": "^14.0.2" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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: {}, | |
| }, | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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: [], | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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: [], | |
| } |
Author
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!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
You should be able to directly import the framework specific convenient functions
or