TailwindCSS build css file too big even after PurgeCSS

Question

In my create-react-app application I'm using Tailiwnd CSS for styling. Unfortunately after running npm run build the css file size is around 1,4mb which is way too big. After looking inside that build file I can see that all unused class are still there,

Here are the scripts from package.json:

  "scripts": {
    "build:css": "postcss src/tailwind.css -o src/tailwind.generated.css",
    "watch:css": "postcss src/tailwind.css -o src/tailwind.generated.css --watch",
    "env:dev": "cross-env NODE_ENV=development",
    "env:prod": "cross-env NODE_ENV=production",
    "react-scripts:start": "sleep 5 && react-scripts start",
    "react-scripts:build": "react-scripts build",
    "start": "run-p env:dev watch:css react-scripts:start",
    "build": "run-s env:prod build:css react-scripts:build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

To minify the build css file size I'm using Purge CSS with following postcss.config.js:

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: ['./public/**/*.html'],
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
});

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    // Purge and minify CSS only production builds only
    ...(process.env.NODE_ENV === 'production'
      ? [purgecss, require('cssnano')]
      : [])
  ]
};

Here is the tailiwnd.config.js:

module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx',
    './src/**/*.js'
  ],
  theme: {
    extend: {
      height: {
        '72': '18rem',
        '80': '20rem',
        '88': '22rem',
        '96': '24rem',
        '104': '26rem'
      },
      fontFamily: {
        display: 'Raleway, sans-serif'
      }
    }
  },
  variants: {},
  plugins: []
};

All of my javascript files are inside ./src folder. Do you have maybe any idea why CSS build file is still that big? I'm using only couple of the classes from Tailiwnd and the app itself is very simple and small,

Thanks!

ctholho · Answer 1 · 2020-05-17T10:26:14.227

0

On the second line of your postcss.config you are only referencing .html files in your public folder. My guess is you should move your configuration related to purgeCSS from the tailwind config into the postcss config.

edited May 17 '20 at 10:26

answered May 17 '20 at 00:06

ctholho

801
11
18

Thanks for your suggestion, it makes sense. Unfotunately after doing that - production css file size is still the same as previously. Just looks like it's builidng the css with all tailwind classes whether they are used or not. – maaajo May 17 '20 at 10:11
I've been pulling out my hair over this same issue – lomse Dec 15 '20 at 13:36

score 0 · Answer 2 · answered Apr 05 '21 at 03:35

Gotta bump this for those still having trouble. The problem is from this conditionals /comparison process.env.NODE_ENV === 'production' That will always evaluate as false and thus the CSS will not be purged and/or compressed. An issue with the default create-react-app. You should probably switch to webpack instead and then you can run conditionals as you deem fit. Or if you like hacking, remove the condition, since a deployed app will always run in a production server. If you make any changes to your local development, then comment-out purgecss and cssnano and run a build. Since you're using TailwindCSS, you would rarely do this after your initial setup. Cheers.

TailwindCSS build css file too big even after PurgeCSS

2 Answers2