Tailwind css and Purge css with create-react-app

TailwindCSS + PurgeCSS React

Steps to reproduce:

1. npx create-react-app my-app
2. yarn add --dev tailwindcss autoprefixer postcss-cli @fullhuman/postcss-purgecss
3. ./node_modules/.bin/tailwind init tailwind.js
4. touch tailwind.css
5. touch postcss.config.js
6. modify start script in package.json: "node scripts/start.js && postcss ./tailwind.css -o src/App.css -w",
7. modify build script in package.json: "node scripts/build.js && postcss ./tailwind.css -o src/App.css"


Contents of postcss.config.js:

const tailwindcss = require("tailwindcss");
const purgecss = require("@fullhuman/postcss-purgecss");

class TailwindExtractor {
  static extract(content) {
    return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
  }
}

module.exports = {
  plugins: [
    tailwindcss("./tailwind.js"),
    purgecss({
      content: ["./src/*.js"],
      extractors: [
        {
          extractor: TailwindExtractor,
          extensions: ["js"]
        }
      ]
    }),
    require("autoprefixer")
  ]
};


Contents of tailwind.css:

/**
 * This injects Tailwind's base styles, which is a combination of
 * Normalize.css and some additional base styles.
 *
 * You can see the styles here:
 * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/preflight";
 */
@tailwind preflight;

/**
 * This injects any component classes registered by plugins.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/components";
 */
@tailwind components;

/**
 * Here you would add any of your custom component classes; stuff that you'd
 * want loaded *before* the utilities so that the utilities could still
 * override them.
 *
 * Example:
 *
 * .btn { ... }
 * .form-input { ... }
 *
 * Or if using a preprocessor or `postcss-import`:
 *
 * @import "components/buttons";
 * @import "components/forms";
 */

/**
 * This injects all of Tailwind's utility classes, generated based on your
 * config file.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/utilities";
 */
@tailwind utilities;

/**
 * Here you would add any custom utilities you need that don't come out of the
 * box with Tailwind.
 *
 * Example :
 *
 * .bg-pattern-graph-paper { ... }
 * .skew-45 { ... }
 *
 * Or if using a preprocessor or `postcss-import`:
 *
 * @import "utilities/background-patterns";
 * @import "utilities/skew-transforms";
 */