How to compress file size in tailwind using postcss?

Question

I have the following postcss.config.js file:

// postcss.config.js
module.exports = {
    plugins: [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ]
}

and the following tailwind.config.js file:

// tailwind.config.js
module.exports = {
    purge: [
        './src/cljs/foo/*.cljs',
        './target/cljs-runtime/*.js',
        './target/cljsbuild/public/js/*',
        './target/cljsbuild/public/js/cljs-runtime/*',
        './target/*'
    ],
    theme: {},
    variants: {},
    plugins: [],
}

And my goal is to compress the css generated, for which I've added the purge key in tailwind.config.js.

To generate the css from the .src tailwind file, styles.src.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

I'm running the command:

postcss ./resources/public/css/styles.src.css -o ./resources/public/css/styles.css

from the root directory of my project that contains both the tailwind.config.js and the postcss.config.js. Yet after running the command, the generated css is 1.2MB, as big as what I had without the purge key. Why isn't postcss purge working?

Answer 1

Your PostCSS configuration is split between tailwind.config.js and postcss.config.js, when it should all be in postcss.config.js.

Why?

Tailwind uses PostCSS behind the scenes. But PostCSS itself doesn't know about your tailwind.config.js file. To use the postcss command, you need to specify the purge option in the postcss.config.js file, not tailwind.config.js. This page on the Tailwind website explains the difference between the two files in detail.

Here is my setup:

// postcss.config.js
module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
        require('@fullhuman/postcss-purgecss')({
            // Specify the paths to all of the template files in your project
            content: [
              './src/cljs/foo/*.cljs',
              './target/cljs-runtime/*.js',
              './target/cljsbuild/public/js/*',
              './target/cljsbuild/public/js/cljs-runtime/*',
              './target/*'
            ],
            // This extractor will tell PurgeCSS to ignore all CSS selectors and tags used in your files
            defaultExtractor: content => Array.from(content.matchAll(/:?([A-Za-z0-9-_:]+)/g)).map(x => x[1]) || []
        }),
    ]
}

Note my tailwind.config.js file is empty:

// tailwind.config.js
module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Answer 2

You don't need that command with postcss.

Just add enabled:true in purge in tailwind.config.json and wrap your path into list as stated in https://tailwindcss.com/docs/optimizing-for-production#enabling-manually:

  purge: {
    enabled: true,
    content: [
        './src/cljs/foo/*.cljs',
        './target/cljs-runtime/*.js',
        './target/cljsbuild/public/js/*',
        './target/cljsbuild/public/js/cljs-runtime/*',
        './target/*'
    ],
  },

There it is! Now you can run and see the results:

npm run build:css

That's the command I use in package.json:

"scripts": {
    "build:css": "tailwind build static/css/tw.css -o static/css/tailwind.css"
  },

Answer 3

Well you can also add purge key in postcss.config.js.

This is my config in postcss.config.js

const purgecss = require('@fullhuman/postcss-purgecss')({
  // Specify the paths to all of the template files in your project
  content: ['./src/**/*.js', './public/index.html'],

  // make sure css reset isnt removed on html and body
  whitelist: ['html', 'body'],

  // Include any special characters you're using in this regular expression
  defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [], 
})


module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),

    ...(process.env.NODE_ENV === 'production' ? [purgecss] : []),
  ],
}

Important: The environment variable NODE_ENV is responsible for dev and prod environment. If you are using tailwindcss in dev mode, then you don't want to purge as you want to use all the available styles. By setting it for production mode will inform postcss and thus this will purge unused css.

Please take note that I haven't set any config for tailwindcss in webpack config.

At build time, make sure that you have your NODE_ENV set to specific value for production use case. You can use either 'production' or 'prod' doesn't matter. Same will reflect in postcss.config.js.

Answer 4

Tailwind will purge automatically - from their docs:

Now whenever you compile your CSS with NODE_ENV set to production, Tailwind will automatically purge unused styles from your CSS

https://tailwindcss.com/docs/controlling-file-size#basic-usage

You can run commands for your dev and production environments - development will keep all Tailwind's classes, production will run the purge.

package.json:

  "dependencies": {
    "autoprefixer": "^9.8.5",
    "postcss-cli": "^7.1.1",
    "tailwindcss": "^1.5.2"
  },
  "devDependencies": {
    "cross-env": "^7.0.2"
  },
  "scripts": {
    "watch": "cross-env NODE_ENV=development postcss static/css/tailwind.css -o  style.css --watch",
    "build": "cross-env NODE_ENV=production postcss static/css/tailwind.css -o  style.css"
  },

postcss.config.js

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}