Config for Vue with Tailwind.css and PurgeCss

main.js

import Vue from "vue";
import App from "./App.vue";

import "@/assets/tailwind.css";

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

postcss.config.js

const glob = require("glob-all");
const path = require("path");
const tailwindcss = require("tailwindcss");
const autoprefixer = require("autoprefixer");
const cssnano = require("cssnano");
const purgecss = require("@fullhuman/postcss-purgecss");

// Custom PurgeCSS extractor for Tailwind that allows special characters in class names.
// https://github.com/FullHuman/purgecss#extractor
class TailwindExtractor {
  static extract(content) {
    return content.match(/[A-Za-z0-9-_:/]+/g) || [];
  }
}

module.exports = {
  plugins: [
    tailwindcss("./tailwind.js"),
    autoprefixer({
      add: true,
      grid: true
    }),
    cssnano({
      preset: "default"
    }),
    purgecss({
      content: glob.sync([path.join(__dirname, "./src/**/*.vue")]),
      extractors: [
        {
          extractor: TailwindExtractor,

          // Specify the file extensions to include when scanning for class names.
          extensions: ["vue"]
        }
      ],
      whitelist: ["html", "body"]
    })
  ]
};

tailwind.css

@tailwind preflight;
@tailwind components;
@tailwind utilities;