Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Webpack: Tailwind CSS + PurgeCSS Example
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require("path");
const glob = require("glob-all");
const 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);
}
}
module.exports = {
entry: "./index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "styles.css"
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{ loader: "css-loader", options: { importLoaders: 1 } }, "postcss-loader"]
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
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"]
}
]
})
]
};
@pxwee5

This comment has been minimized.

Copy link

@pxwee5 pxwee5 commented Nov 28, 2017

Does this setting remove normalizeCSS styles as well?
I've implemented this on my Nuxt Webpack configuration and it removes a chunk of the normalize styles.

@andrewdelprete

This comment has been minimized.

Copy link
Owner Author

@andrewdelprete andrewdelprete commented Nov 28, 2017

Hey @pxwee5, I believe if your app is not using some of the selectors within the html files you provide than they'll be removed. I'm pretty sure you can whitelist the ones it's removed if necessary.

@pxwee5

This comment has been minimized.

Copy link

@pxwee5 pxwee5 commented Nov 28, 2017

Oh, how did I miss that bit? Working example.

  plugins: [
    new ExtractTextPlugin("styles.css"),
    new PurgecssPlugin({
      whitelist: ['body', '.whitelisted-class'],
      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"]
        }
      ]
    })
  ]
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.