Use PurgeCSS with Tailwind & Gulp (Inspired by @andrewdelprete)

purgecss-tailwind-gulp-example.js

const atimport = require("postcss-import");
const { dest, src, task } = require("gulp");
const postcss = require("gulp-postcss");
const purgecss = require("@fullhuman/postcss-purgecss");
const tailwindcss = require("tailwindcss");

const TAILWIND_CONFIG = "./tailwind.config.js";
const SOURCE_STYLESHEET = "./src/style.css";
const DESTINATION_STYLESHEET = "./build/style.css";

task("css", () =>
  src(SOURCE_STYLESHEET)
    .pipe(
      postcss([
        atimport(),
        tailwindcss(TAILWIND_CONFIG),
        ...(process.env.NODE_ENV === "production"
          ? [
              purgecss({
                content: ["**/*.html"],
                defaultExtractor: content =>
                  content.match(/[\w-/:]+(?<!:)/g) || []
              })
            ]
          : [])
      ])
    )
    .pipe(dest(DESTINATION_STYLESHEET))
);

You are awesome, thanks for your example!!!

No problem! Glad it helped! I've got a starter here if you're interested: https://github.com/taylorbryant/tailwind-jekyll

Thank you so much, this really helped me out with a WordPress + Tailwind setup!

Keep getting a Class constructor TailwindExtractor cannot be invoked without 'new' error

@Vohra98 PurgeCSS v2 doesn't use classes for extractors anymore.

Use this instead:

              purgecss({
                content: ["**/*.html"],
                defaultExtractor: content =>
                  content.match(/[\w-/:]+(?<!:)/g) || []
              })

@Vohra98 PurgeCSS v2 doesn't use classes for extractors anymore.

Use this instead:

              purgecss({
                content: ["**/*.html"],
                defaultExtractor: content =>
                  content.match(/[\w-/:]+(?<!:)/g) || []
              })

Thanks, been struggling with this for a while. All I found were examples from the previous v1 API.

@Vohra98 PurgeCSS v2 doesn't use classes for extractors anymore.

Use this instead:

              purgecss({
                content: ["**/*.html"],
                defaultExtractor: content =>
                  content.match(/[\w-/:]+(?<!:)/g) || []
              })

Thank you

Cool that's works thanks

the best setup on the internet ! not even the library makers could think simple like that.