PurgeCSS ignores layout customizations

Using Themes
,
1

I’m trying to set up a Hugo site that would use the GitHub - Ice-Hazymoon/hugo-theme-luna: A simple, performance-first, SEO-friendly Hugo theme / 一个轻量，快速，SEO 友好的 Hugo 主题 theme that I’ve set up as a git module. This theme uses Tailwind + PurgeCSS.

I’m trying to customize the theme, working on layout overrides, but the problem is, when I introduce a Tailwind class that hasn’t been used before, the relevant CSS for the class still ends up being stripped. Am I missing some extra steps to set up the purging properly? Or is this a problem with the theme itself?

2

Note the correct way to override themes is to copy the files you need to the same path in the project root, not directly editing the theme files!

3

Need a bit more detail to help you debug this:

  • Where exactly did you place the new class?
  • Which class is it?
  • Does it work in hugo server and only get stripped in the production build?
  • Did you modify the theme’s tailwind.config.js, postcss.config.js, or anything else?
  • Do you have a link to your repo?
4

I’m well aware; what you described is exactly what I meant by “working on layout overrides”.

5

I’ve set up an example repo that demonstrates the problem: GitHub - scorchio/hugo-purgecss-sample: # Hugo sample project to demostrate issue with PurgeCSS - I’ve included installation instructions in the README. If you set it up and go to the about page of it, you should see the issue:

Below, you should see two dummy images that are coming form the layouts/_default/page.html theme override file. They have some Tailwind classes that are not used in hugo-theme-luna. If you check them in the inspector, it should be visible that the relevant CSS is missing: on the left image, the md:mr-6 class doesn’t have any effect, leaving the gap between the images minimal.

6

Please reach out to the theme author.

7

That’s definitely something I can do, but I would be still interested about how is this expected to work in general when a Hugo theme relies on PurgeCSS? Is this something usually handled by the theme’s postcss.config.js configuration?

8

Yes, for example:
https://gohugo.io/functions/resources/postprocess/#example

I have a vague recollection of site and theme authors struggling with Tailwind CSS 3.x, and some of those struggles were related to tree shaking. Tailwind CSS 4.x made everything much easier.

Your theme uses Tailwind CSS 3.x combined with the LibSass transpiler. That’s not something I want to dig into.

9

Understandable, thanks for pointing this out. I think I might be better off with selecting a more fitting theme.

10

The main issue is that Tailwind and PostCSS don’t know about your /layouts/_default/page.html, so you need to add the path ../../layouts/**/*.html to both tailwind.config.js and postcss.config.js. After doing that, your class should apply correctly.

But still adding a new class requires a hugo server restart to pick up the change. So this is not a valid workflow.

If you only need small tweaks, it’s better to use assets/sass/custom.scss with vanilla CSS.
But if you want a more robust Tailwind setup, it’s definitely worth asking the theme author to update to Tailwind 4 or find an alternative.