diff --git a/README.md b/README.md index 555a78e..abcec37 100644 --- a/README.md +++ b/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 diff --git a/tailwind/specify-paths-for-purging-unused-css.md b/tailwind/specify-paths-for-purging-unused-css.md new file mode 100644 index 0000000..99f8f59 --- /dev/null +++ b/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)