docs(react): adjust Tailwind guide for React (#6386)

This commit is contained in:
Juri Strumpflohner 2021-07-15 21:27:58 +02:00 committed by GitHub
parent f86a07367a
commit 56e30d7739
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -28,9 +28,13 @@ This creates the needed files with a general boilerplate implementation.
Next, adjust the `postcss.config.js` as follows:
```js
const { join } = require('path');
module.exports = {
plugins: {
tailwindcss: { config: './apps/{your app here}/tailwind.config.js' },
tailwindcss: {
config: join(__dirname, 'tailwind.config.js'),
},
autoprefixer: {},
},
};
@ -43,10 +47,15 @@ In a typical `tailwind.config.js` file, the `purge` property of the tailwind con
Nx has a utility function for determining the glob representation of all files the application depends on (based on the Nx Dependency Graph), which should be used when setting this purge property. This eliminates additional manual maintenance as your workspace progresses.
```js
const { join } = require('path');
const { createGlobPatternsForDependencies } = require('@nrwl/react/tailwind');
module.exports = {
purge: createGlobPatternsForDependencies(__dirname),
purge: [
// place your own app's glob pattern (for example)
join(__dirname, '**/*.{js,ts,jsx,tsx}'),
...createGlobPatternsForDependencies(__dirname),
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
@ -58,6 +67,8 @@ module.exports = {
};
```
`createGlobPatternsForDependencies(..)` uses the Nx dependency graph to generate glob patterns for all the app's **dependencies** (e.g. for all referenced libraries within the Nx workspace).
_NOTE:_ To ensure proper purging for custom configurations, be sure that the `NODE_ENV` environment variable is set to `production`. By default, Nx only purges on prod build (for example: `nx build --prod`).
## Step 3: Import TailwindCss Styles