Add Specify Paths For Purging Unused CSS as a tailwind til

Author: jbranchaud

README.md

@@ -10,7 +10,7 @@ pairing with smart people at Hashrocket.
 
 For a steady stream of TILs, [sign up for my newsletter](https://tinyletter.com/jbranchaud).
 
-_1031 TILs and counting..._
+_1032 TILs and counting..._
 
 ---
 
@@ -901,6 +901,7 @@ _1031 TILs and counting..._
 ### Tailwind CSS
 
 - [Base Styles For Text Link](tailwind/base-styles-for-text-link.md)
+- [Specify Paths For Purging Unused CSS](tailwind/specify-paths-for-purging-unused-css.md)
 
 ### tmux
 

tailwind/specify-paths-for-purging-unused-css.md

@@ -0,0 +1,37 @@
+# Specify Paths For Purging Unused CSS
+
+Tailwind CSS is a full-featured utility class CSS framework. It has just about
+everything you need. It also has a bunch of things you probably don't need. And
+there is no need to ship the CSS you don't need to the client. Tailwind is able
+to exclude the unused CSS through a mechanism called _purging_.
+
+To turn on purging (for _production_) and for Tailwind to know what can be
+safely purged, you need to specify one or more _purge paths_ in your
+`tailwind.config.js` file. This is a listing of all the places where you use
+Tailwind utility classes.
+
+Specify it with an array at the `purge` key:
+
+```javascript
+module.exports = {
+  purge: [
+    "./src/components/**/*.jsx",
+    "./pages/**/*.js"
+  ],
+  darkMode: false,
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+};
+```
+
+Notice that globbed paths can be used as a way of specifying files located in a
+nested directory structure. Above I've stated that any `jsx` files located
+anywhere under `src/components/` as well as any `js` files located anywhere
+under `pages/` should be checked.
+
+[source](https://tailwindcss.com/docs/optimizing-for-production#basic-usage)