Use builtin Tailwind purging

[mhanberg]

Tailwind now can purge itself. The template should be updated to reflect this.

Since the template doesn't hard code the tailwind config, there should be a copy/paste-able purge config in the readme.

[LukasMurdock]

I don’t know what I’m doing, but hopefully this helps or saves you some time.

Following https://tailwindcss.com/docs/optimizing-for-production#removing-unused-css, I created a tailwind.config.js file and put

// tailwind.config.js
module.exports = {
    purge: [
      '_site/**/*.html',
    ],
    darkMode: false,
    theme: {
      extend: {
        colors: {
            // Configure your color palette here
            'custom-grey': '#e0e7e9',
            'custom-red': '#c8314d'
          }
      }
    },
    variants: {},
    plugins: [
      require('@tailwindcss/typography')
    ],
  }

And spent a few hours trying to figure out why it wasn’t working properly. Apparently Tailwind CSS (PurgeCSS?) doesn’t purge properly in Netlify continuous development. The only working solution I’ve found is using Netlify CLI to manually deploy your site with netlify deploy then netlify deploy --prod

https://community.netlify.com/t/purgecss-differences-between-local-and-server/27973

[mhanberg]

I'm not sure if there is a guarantee as to when jekyll will run the postcss plugin vs the markdown plugins, so _site/**/*.html might not be generated yet.

Also, I think you need to make sure that NODE_ENV=production is set on your build server for the built in purging to work.

[LukasMurdock]

Everything works fine locally. I fiddled with NODE_ENV=production and JEKYLL_ENV=production in Netlify.toml and Netlify UI just trying to get it to work—which is apparently solved by manual deployment.

[yuceltoluyag]

@mhanberg https://tailwindcss.com/docs/optimizing-for-production purge seems to be deprecated, replaced by the --minify tag I guess

[mhanberg]

I think it was actually replace by using the JIT compiler. --minify will minify the css file.