Skip to content

Instantly share code, notes, and snippets.

@taylorbryant
Last active February 24, 2023 10:30
Show Gist options
  • Save taylorbryant/91fc05b12472a88a8b6494f610647cd4 to your computer and use it in GitHub Desktop.
Save taylorbryant/91fc05b12472a88a8b6494f610647cd4 to your computer and use it in GitHub Desktop.
Use PurgeCSS with Tailwind & Gulp (Inspired by @andrewdelprete)
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))
);
@madruga8
Copy link

madruga8 commented Jul 29, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment