Remove PurgeCSS feature in favor of Tailwind's built-in Purge.

Author: Brandon Pittman

README.md

@@ -3,15 +3,11 @@
 This plugin will add [Tailwind](http://tailwindcss.com) to your
 [Gridsome](http://gridsome.org) project.
 
-**Currently working on v3, which will remove PurgeCSS capabilities**
-
-*(because Tailwind 1.4+ has it baked in)*
-
 ## Who This Is For
 
 If you want to set up Tailwind with the least amount of effort in a Gridsome
-project, this is for you. If you want to lean in to the *Way of
-Tailwind*—using `tailwind.config.js` or keep your CSS inside your Vue
+project, this is for you. If you want to lean in to the _Way of
+Tailwind_—using `tailwind.config.js` or keep your CSS inside your Vue
 files' style blocks—this is the plugin for you. If you want to have a
 global CSS file and dump a bunch of crap in there, you'll wind up fighting this
 plugin.
@@ -20,7 +16,6 @@ plugin.
 
 `npm install -D gridsome-plugin-tailwindcss`
 
-
 ## Usage
 
 I've gone ahead and automatically imported the default `tailwind.css` file from
@@ -36,8 +31,7 @@ You may be wondering, "Where do I add global CSS?!" Short answer, you don't.
 Long answer, read the Tailwind docs on [creating plugins][plugins] and use
 `tailwind.config.js` to add base styles and create components/utilities there.
 
-**If you need to create `tailwind.config.js`, run `./node_modules/.bin/tailwind
-init` to create one.**
+**If you need to create `tailwind.config.js`, run `./node_modules/.bin/tailwind init` to create one.**
 
 [plugins]: https://tailwindcss.com/docs/plugins/#app
 
@@ -49,55 +43,29 @@ Set any options you want to set in `gridsome.config.js`.
 module.exports = {
   plugins: [
     {
-      use: 'gridsome-plugin-tailwindcss',
+      use: "gridsome-plugin-tailwindcss",
       /**
       * These are the default options. You don't need to set any options to get
       * going. Seriously, you don't need to declare tailwind.config.js.
 
       options: {
         tailwindConfig: './tailwind.config.js',
-        purgeConfig: {},
         presetEnvConfig: {},
-        shouldPurge: true,
         shouldImport: true,
         shouldTimeTravel: true
       }
       */
-    }
-  ]
-}
+    },
+  ],
+};
 ```
 
 **If you don't supply a config file path, Tailwind defaults will be used.**
 
-
-
 ## Plugins
 
 The following PostCSS plugins are also included with this plugin:
 
-### PurgeCSS
-
-[PurgeCSS](https://www.purgecss.com/with-postcss) is enabled by default. If
-you'd like to disable it, pass `shouldPurge:false` to the plugin options
-object.
-
-### postcss-import
-
-[postcss-import](https://github.com/postcss/postcss-import) included by
-default. Pass `shouldImport: false` to disable.
-
-### postcss-preset-env
-
-[postcss-preset-env](https://github.com/csstools/postcss-preset-env) included
-by default. Pass `shouldTimeTravel: false` to disable. You may also pass a
-config object to the plugin as `presetEnvConfig`.
-
-With this one plugin, you should be ready to use Tailwind right away. Keep your
-customization to `tailwind.config.js` whenever possible, but you can use the
-full power of Tailwind (including `@apply`) in your Vue components when
-necessary.
-
 ## Examples
 
 - [🍸 Aperitif — A delectable starter template for your next Gridsome project.](https://github.com/brandonpittman/aperitif)

gridsome.server.js

@@ -1,11 +1,9 @@
 function TailwindPlugin(api, options) {
   const {
     tailwindConfig,
-    purgeConfig,
     presetEnvConfig,
     importUrlConfig,
     shouldImport,
-    shouldPurge,
     shouldTimeTravel,
   } = options;
 
@@ -35,21 +33,13 @@ function TailwindPlugin(api, options) {
             );
           }
 
-          // eslint-disable-next-line no-unused-expressions
-          if (process.env.NODE_ENV === "production" && shouldPurge) {
-            options.plugins.push(
-              require("@fullhuman/postcss-purgecss")(purgeConfig)
-            );
-          }
-
           return options;
         });
     });
   });
 }
 
 TailwindPlugin.defaultOptions = () => ({
-  shouldPurge: true,
   shouldImport: true,
   shouldTimeTravel: true,
   importUrlConfig: {
@@ -64,54 +54,6 @@ TailwindPlugin.defaultOptions = () => ({
       "focus-within-pseudo-class": false,
     },
   },
-  purgeConfig: {
-    keyframes: true,
-    content: [
-      "./src/**/*.vue",
-      "./src/**/*.js",
-      "./src/**/*.jsx",
-      "./src/**/*.ts",
-      "./src/**/*.tsx",
-      "./src/**/*.html",
-      "./src/**/*.pug",
-      "./src/**/*.md",
-      "./src/**/*.svg",
-    ],
-    whitelist: [
-      "body",
-      "html",
-      "img",
-      "a",
-      "g-image",
-      "g-image--lazy",
-      "g-image--loaded",
-      "active",
-      "active--exact",
-    ],
-    whitelistPatterns: [
-      /shiki/,
-      /prism/,
-      /token$/,
-      /markdown/,
-      /rich-text/,
-      /richtext/,
-      /.*-(enter|enter-active|enter-to|leave|leave-active|leave-to)/,
-      /data-v-.*/,
-      />>>/,
-      /::v-deep/,
-    ],
-
-    // This is the function used to extract class names from your templates
-    defaultExtractor: (content) => {
-      // Capture as liberally as possible, including things like `h-(screen-1.5)`
-      const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [];
-
-      // Capture classes within other delimiters like .block(class="w-1/2") in Pug
-      const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || [];
-
-      return broadMatches.concat(innerMatches);
-    },
-  },
 });
 
 module.exports = TailwindPlugin;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gridsome-plugin-tailwindcss",
-  "version": "2.2.48",
+  "version": "3.0.1",
   "description": "Add Tailwind to a Gridsome project.",
   "main": "gridsome.server.js",
   "files": [
@@ -17,7 +17,6 @@
     "gridsome-plugin",
     "tailwindcss",
     "postcss",
-    "purgecss",
     "postcss-import",
     "postcss-preset-env"
   ],
@@ -28,8 +27,7 @@
   },
   "homepage": "https://github.com/brandonpittman/gridsome-plugin-tailwindcss#readme",
   "dependencies": {
-    "@fullhuman/postcss-purgecss": "^2.1.2",
-    "postcss": "^7.0.27",
+    "postcss": "^7.0.32",
     "postcss-import": "^12.0.1",
     "postcss-import-url": "^5.1.0",
     "postcss-preset-env": "^6.7.0",