Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Laravel Mix: Tailwind CSS + PurgeCSS Example
let mix = require("laravel-mix");
let tailwindcss = require("tailwindcss");
let glob = require("glob-all");
let PurgecssPlugin = require("purgecss-webpack-plugin");
/**
* Custom PurgeCSS Extractor
* https://github.com/FullHuman/purgecss
* https://github.com/FullHuman/purgecss-webpack-plugin
*/
class TailwindExtractor {
static extract(content) {
return content.match(/[A-z0-9-:\/]+/g);
}
}
mix.postCss("./src/styles.css", "public/css", [tailwindcss("./tailwind.js")]);
mix.webpackConfig({
plugins: [
new PurgecssPlugin({
paths: glob.sync([
path.join(__dirname, "resources/views/**/*.blade.php"),
path.join(__dirname, "resources/assets/js/**/*.vue")
]),
extractors: [
{
extractor: TailwindExtractor,
extensions: ["html", "js", "php", "vue"]
}
]
})
]
});
@andrewdelprete

This comment has been minimized.

Copy link
Owner Author

andrewdelprete commented Nov 19, 2017

Requires glob-all and purgecss-webpack-plugin NPM packages. use npm or yarn to install.

@ockam

This comment has been minimized.

Copy link

ockam commented Nov 22, 2017

Thank you so much. This is huge, er, small. ;)

I’m not that familiar with mix.webpackConfig: is there a way to target a specific file when we want to optimize only one among many?

@andrewdelprete

This comment has been minimized.

Copy link
Owner Author

andrewdelprete commented Nov 22, 2017

Hey @ockam, just to clarify, are you wanting to run PurifyCSS on only one CSS file among many other CSS files?

@ockam

This comment has been minimized.

Copy link

ockam commented Nov 23, 2017

@andrewdelprete yes, exactly.

@andrewdelprete

This comment has been minimized.

Copy link
Owner Author

andrewdelprete commented Nov 26, 2017

Hey @ockam, you should be able to specify multiple mix.postCss() calls in Mix.


...
mix.postCss("./src/a.css", "public/css")
   .postCss("./src/b.purged.css", "public/css", [tailwindcss("./tailwind.js")]);

https://github.com/JeffreyWay/laravel-mix/blob/master/docs/css-preprocessors.md#multiple-builds

Because PurgeCSS is a PostCSS plugin, it will still run on every mix.postCss() call you provide. I haven't tried this, but one possible way to isolate PurgeCSS is to provide a styleExtensions prop to the plugin.

new PurgecssPlugin({
  paths: glob.sync([
    path.join(__dirname, "resources/views/**/*.blade.php"),
    path.join(__dirname, "resources/assets/js/**/*.vue")
  ]),
  extractors: [
    {
      extractor: TailwindExtractor,
      extensions: ["html", "js", "php", "vue"]
    }
  ],
  styleExtensions: ['.purged.css']
});

https://github.com/FullHuman/purgecss-webpack-plugin#usage

@FullHuman is this correct? Could you theoretically add a main.purged.css file and have the PurgeCSS webpack plugin only optimize it and skip other css files provided in the build?

@ockam

This comment has been minimized.

Copy link

ockam commented Nov 27, 2017

@andrewdelprete

I did some testing with your idea and it doesn’t appear to work. :(

There is an issue opened on Laravel Mix about purgecss. I cross my finger and hope something can come out of it.

@andrewdelprete

This comment has been minimized.

Copy link
Owner Author

andrewdelprete commented Nov 27, 2017

@ockam - Gotcha! that makes sense. I posted a comment there! That particular issue has to do with him not running his css through Webpack and is just combining together with Mix.combine().

@simonhamp

This comment has been minimized.

Copy link

simonhamp commented Aug 14, 2018

This is brilliant @andrewdelprete. Thanks! 👍

@cyberEst1919

This comment has been minimized.

Copy link

cyberEst1919 commented Dec 6, 2018

yeah, thanks a lot!
purgecss together with tailwind is the best thing ever happend! 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.