Skip to content

Commit 22aa9b0

Browse files
authored
Added info on setting up PurgeCSS support to README.md
1 parent 53936ab commit 22aa9b0

File tree

1 file changed

+25
-0
lines changed

1 file changed

+25
-0
lines changed

README.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,31 @@
4848

4949
`python manage.py tailwind build`.
5050

51+
## PurgeCSS setup
52+
53+
To avoid importing all of Tailwind (resulting in a massive CSS filesize), set up the purge configuration in `tailwind.config.js`.
54+
This file is located in the `static_src` folder of the app created by `tailwind init {APP_NAME}`.
55+
56+
For example, your `tailwind.config.js` file could look like:
57+
58+
```js
59+
module.exports = {
60+
purge: [
61+
// Templates within theme app (e.g. base.html)
62+
'../templates/**/*.html',
63+
// Templates in other apps
64+
'../../templates/**/*.html',
65+
],
66+
...
67+
}
68+
```
69+
70+
Note that you may need to adjust those paths to suit your specific project layout. It is important to ensure that _all_ of your HTML files are covered (or files with contain HTML content, such as .vue or .jsx files), to enusre PurgeCSS can whitelist all of your classes.
71+
72+
For more information on this, check out the "Controlling File Size" page of the Tailwind docs: [https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css](https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css) - particularly the "Removing Unused CSS" section, although the entire page is a useful reference.
73+
74+
To help speed up development builds, PurgeCSS is only run when you use the `tailwind build` management command (to create a production build of your CSS).
75+
5176
## NPM executable path configuration
5277

5378
Sometimes (especially on Windows), Python executable can't find `NPM` installed in the system.

0 commit comments

Comments
 (0)