Cannot purge unused CSS in Hugo site with Tailwind

1

I am working on a Hugo site that uses Tailwind CSS. I followed the instructions in this post so I can purge unused CSS.

It works fine in my computer, however I cannot make it work on render, it does not purge the unused CSS styles.

To make it work in my computer I only run NODE_ENV=production hugo, however that command does not compress my CSS on render.

Any idea? I can share my git repo if needed.

Thanks in advance for any help.

5

Hi @hectorsq welcome to the Render community! Can you share a link to the service so I can take a look? In the meantime, can you try setting NODE_ENV=production in the Environment tab on your dashboard?

6

@hectorsq, after following that tutorial myself I had to set my Build command in my settings to NODE_ENV=production hugo --gc --minify and it looks like it successfully purged and minified. https://my-hugo-site-68nk.onrender.com/css/main.min.cfebda652464aab14120432e225043a8bf5005d5ad77e2b92b9f1b6dbefb2292.css

Let me know if that works for you!

7

@tyler Thank you very much for your help, I reviewed your site, and it is working fine. The CSS is only 4.56 KB.

I will try again following the tutorial step by step. It seems that I missed something when applying the steps to my own site.

8

I finally found the problem. My original project has a custom theme where I moved the layouts and assets. However, I missed configuring the theme layout folder in the purge section of tailwind.config.js

The final content of tailwind.config.js is

module.exports = {
  purge: [
    'layouts/**/*.html',
    'themes/my-hugo-theme/layouts/**/*.html'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

The complete code is here, and the running site is here.